@next-bricks/data-view 1.12.10 → 1.12.12

package/dist/examples.json

@@ -1,143 +1,143 @@
 {
   "data-view.gauge-chart": {
-    "doc": "大屏仪表盘构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.gauge-chart\n  properties:\n    value: 100\n    radius: 180\n    strokeWidth: 20\n    description: 已部署 1490 个 / 3300个\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 已部署 1490 个 / 3300个\n            style:\n              font-size: 16px\n              font-weight: 500\n              color: \"#fff\"\n              margin: 0 0 300px 0\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gauge-chart\n#   value=\"100\"\n#   radius=\"180\"\n#   stroke-width=\"20\"\n#   description=\"已部署 1490 个 / 3300个\"\n# >\n#   <div\n#     style=\"font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 300px 0\"\n#   >\n#     已部署 1490 个 / 3300个\n#   </div>\n# </data-view.gauge-chart>\n# \n```\n"
+    "doc": "---\ntagName: data-view.gauge-chart\ndisplayName: WrappedDataViewGaugeChart\ndescription: 大屏仪表盘\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.gauge-chart\n\n> 大屏仪表盘\n\n## Props\n\n| 属性        | 类型     | 必填 | 默认值 | 说明                                         |\n| ----------- | -------- | ---- | ------ | -------------------------------------------- |\n| value       | `number` | -    | -      | 值，范围在 [0-100]                           |\n| radius      | `number` | -    | -      | 仪表盘半径                                   |\n| strokeWidth | `number` | -    | `20`   | 仪表盘圆弧的宽度，也用于计算值终点圆点的大小 |\n| description | `string` | -    | -      | 描述文字，显示在数值下方                     |\n| fontSize    | `number` | -    | `35`   | 值的字体大小                                 |\n\n## Examples\n\n### Basic\n\n展示大屏仪表盘的基本用法，包含值、半径和圆弧宽度。\n\n```yaml preview\nbrick: data-view.gauge-chart\nproperties:\n  value: 75\n  radius: 150\n  strokeWidth: 20\n  description: 已部署 750 个 / 1000 个\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gauge-chart\n#   value=\"75\"\n#   radius=\"150\"\n#   stroke-width=\"20\"\n#   description=\"已部署 750 个 / 1000 个\"\n# ></data-view.gauge-chart>\n# \n```\n\n### With Slot Content\n\n使用默认插槽在仪表盘下方插入自定义内容。\n\n```yaml preview\nbrick: data-view.gauge-chart\nproperties:\n  value: 100\n  radius: 180\n  strokeWidth: 20\n  description: 已部署 1490 个 / 3300个\nslots:\n  \"\":\n    type: bricks\n    bricks:\n      - brick: div\n        properties:\n          textContent: 已部署 1490 个 / 3300个\n          style:\n            font-size: 16px\n            font-weight: 500\n            color: \"#fff\"\n            margin: 0 0 300px 0\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gauge-chart\n#   value=\"100\"\n#   radius=\"180\"\n#   stroke-width=\"20\"\n#   description=\"已部署 1490 个 / 3300个\"\n# >\n#   <div\n#     style=\"font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 300px 0\"\n#   >\n#     已部署 1490 个 / 3300个\n#   </div>\n# </data-view.gauge-chart>\n# \n```\n\n### Custom Font Size\n\n自定义值的字体大小。\n\n```yaml preview\nbrick: data-view.gauge-chart\nproperties:\n  value: 60\n  radius: 120\n  strokeWidth: 15\n  description: 系统负载\n  fontSize: 28\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gauge-chart\n#   value=\"60\"\n#   radius=\"120\"\n#   stroke-width=\"15\"\n#   description=\"系统负载\"\n#   font-size=\"28\"\n# ></data-view.gauge-chart>\n# \n```\n"
   },
   "data-view.modern-style-component-title": {
-    "doc": "现代风格的组件标题\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n\n### TitleSuffix && Toolbar slot\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n  slots:\n    toolbar:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: toolbar\n    titleSuffix:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: titleSuffix\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# >\n#   <span slot=\"toolbar\">toolbar</span>\n#   <span slot=\"titleSuffix\">titleSuffix</span>\n# </data-view.modern-style-component-title>\n# \n```\n\n### hideRightComponent\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    hideRightComponent: false\n    hideLeftComponent: true\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   hide-right-component=\"false\"\n#   hide-left-component=\"true\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n"
+    "doc": "---\ntagName: data-view.modern-style-component-title\ndisplayName: WrappedDataViewModernStyleComponentTitle\ndescription: 现代风组件标题\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.modern-style-component-title\n\n> 现代风组件标题\n\n## Props\n\n| 属性               | 类型                           | 必填 | 默认值  | 说明             |\n| ------------------ | ------------------------------ | ---- | ------- | ---------------- |\n| hideLeftComponent  | `boolean`                      | 否   | `false` | 是否隐藏左侧装饰 |\n| hideRightComponent | `boolean`                      | 否   | `true`  | 是否隐藏右侧装饰 |\n| componentTitle     | `string`                       | 否   | -       | 组件标题         |\n| titleTextStyle     | `React.CSSProperties`          | 否   | -       | 标题文字样式     |\n| squareColor        | `React.CSSProperties[\"color\"]` | 否   | -       | 装饰颜色         |\n\n## Slots\n\n| 名称        | 说明                                                                      |\n| ----------- | ------------------------------------------------------------------------- |\n| toolbar     | 工具栏区域，在 `hideLeftComponent` 为 `true` 时显示于左侧，否则显示于右侧 |\n| titleSuffix | 标题后缀内容，紧跟标题文字后显示                                          |\n\n## Examples\n\n### Basic\n\n展示现代风组件标题的基本用法。\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n\n### TitleSuffix && Toolbar slot\n\n展示带工具栏和标题后缀插槽的现代风组件标题。\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n  slots:\n    toolbar:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: toolbar\n    titleSuffix:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: titleSuffix\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# >\n#   <span slot=\"toolbar\">toolbar</span>\n#   <span slot=\"titleSuffix\">titleSuffix</span>\n# </data-view.modern-style-component-title>\n# \n```\n\n### Hide Left Component with Right Decoration\n\n展示隐藏左侧装饰、显示右侧装饰并自定义颜色的现代风组件标题。\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    hideRightComponent: false\n    hideLeftComponent: true\n    squareColor: \"#4AEAFF\"\n    titleTextStyle:\n      color: \"#FFFFFF\"\n      fontSize: 18px\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   hide-right-component=\"false\"\n#   hide-left-component=\"true\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-component-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.squareColor = \"#4AEAFF\";\n#   brick_1.titleTextStyle = {\n#     color: \"#FFFFFF\",\n#     fontSize: \"18px\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.modern-style-page-title": {
-    "doc": "现代风格的页面标题构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-page-title\n  properties:\n    pageTitle: XX应用大屏\n    description: \"- APPLICATION HEALTH MONITORING SCREEN -\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-page-title\n#   page-title=\"XX应用大屏\"\n#   description=\"- APPLICATION HEALTH MONITORING SCREEN -\"\n#   style=\"display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-page-title>\n# \n```\n"
+    "doc": "---\ntagName: data-view.modern-style-page-title\ndisplayName: WrappedDataViewModernStylePageTitle\ndescription: 现代风页面标题\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.modern-style-page-title\n\n> 现代风页面标题\n\n## Props\n\n| 属性            | 类型                  | 必填 | 默认值 | 说明             |\n| --------------- | --------------------- | ---- | ------ | ---------------- |\n| pageTitle       | `string`              | 是   | -      | 页面标题         |\n| description     | `string`              | 否   | -      | 辅助描述         |\n| backgroundStyle | `React.CSSProperties` | 否   | -      | 背景样式         |\n| leftRoundStyle  | `React.CSSProperties` | 否   | -      | 左边圆形装饰样式 |\n| rightRoundStyle | `React.CSSProperties` | 否   | -      | 右边圆形装饰样式 |\n\n## Examples\n\n### Basic\n\n展示现代风页面标题的基本用法，包含主标题和辅助描述。\n\n```yaml preview\n- brick: data-view.modern-style-page-title\n  properties:\n    pageTitle: XX应用大屏\n    description: \"- APPLICATION HEALTH MONITORING SCREEN -\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-page-title\n#   page-title=\"XX应用大屏\"\n#   description=\"- APPLICATION HEALTH MONITORING SCREEN -\"\n#   style=\"display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-page-title>\n# \n```\n\n### Custom Style\n\n展示自定义背景和圆形装饰样式的现代风页面标题。\n\n```yaml preview\n- brick: data-view.modern-style-page-title\n  properties:\n    pageTitle: 智慧城市监控大屏\n    description: \"- SMART CITY MONITORING -\"\n    backgroundStyle:\n      opacity: 0.8\n    leftRoundStyle:\n      background: \"rgba(74, 234, 255, 0.3)\"\n    rightRoundStyle:\n      background: \"rgba(74, 234, 255, 0.3)\"\n    style:\n      display: block\n      background-color: \"#0a0e1a\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-page-title\n#   page-title=\"智慧城市监控大屏\"\n#   description=\"- SMART CITY MONITORING -\"\n#   style=\"display: block; background-color: #0a0e1a\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-page-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.backgroundStyle = {\n#     opacity: 0.8,\n#   };\n#   brick_1.leftRoundStyle = {\n#     background: \"rgba(74, 234, 255, 0.3)\",\n#   };\n#   brick_1.rightRoundStyle = {\n#     background: \"rgba(74, 234, 255, 0.3)\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.tabs-drawer": {
-    "doc": "data-view.tabs-drawer\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.tabs-drawer\n  properties:\n    activeKey: search\n    id: drawer\n    visible: true\n    width: 800\n    style:\n      height: 600px\n      display: block\n    tabList:\n      - tooltip: 搜索\n        key: search\n        icon:\n          lib: fa\n          icon: search\n          prefix: fas\n      - tooltip: 内容\n        key: app\n        icon:\n          lib: easyops\n          category: app\n          icon: micro-app-configuration\n\n      - tooltip: 图表\n        key: chart\n        icon:\n          lib: fa\n          icon: ad\n          prefix: fas\n  slots:\n    search:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            style:\n              padding: 0 16px\n              height: 100px\n              background: red\n            textContent: 测试\n    app:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 内容区域\n            style:\n              background: yellow\n              height: 100px\n    chart:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 图表区域\n            style:\n              background: green\n              height: 100px\n  events:\n    close:\n      - action: console.log\n    tab.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-drawer\n#   active-key=\"search\"\n#   visible\n#   style=\"height: 600px; display: block\"\n#   id=\"drawer\"\n# >\n#   <div slot=\"search\" style=\"padding: 0 16px; height: 100px; background: red\">\n#     测试\n#   </div>\n#   <div slot=\"app\" style=\"background: yellow; height: 100px\">内容区域</div>\n#   <div slot=\"chart\" style=\"background: green; height: 100px\">图表区域</div>\n# </data-view.tabs-drawer>\n# \n# <script>\n#   const drawer = document.getElementById(\"drawer\");\n#   drawer.width = 800;\n#   drawer.tabList = [\n#     {\n#       tooltip: \"搜索\",\n#       key: \"search\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"search\",\n#         prefix: \"fas\",\n#       },\n#     },\n#     {\n#       tooltip: \"内容\",\n#       key: \"app\",\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"app\",\n#         icon: \"micro-app-configuration\",\n#       },\n#     },\n#     {\n#       tooltip: \"图表\",\n#       key: \"chart\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"ad\",\n#         prefix: \"fas\",\n#       },\n#     },\n#   ];\n#   drawer.addEventListener(\"close\", (e) => {\n#     console.log(e.detail);\n#   });\n#   drawer.addEventListener(\"tab.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.tabs-drawer\ndisplayName: WrappedDataViewTabsDrawer\ndescription: 大屏仪标签页抽屉\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.tabs-drawer\n\n> 大屏仪标签页抽屉\n\n## Props\n\n| 属性        | 类型                  | 必填 | 默认值 | 说明                                               |\n| ----------- | --------------------- | ---- | ------ | -------------------------------------------------- |\n| tabList     | `TabItem[]`           | 是   | -      | 抽屉左侧菜单列表                                   |\n| activeKey   | `string`              | 是   | -      | 抽屉左侧菜单高亮显示                               |\n| width       | `number \\| string`    | 是   | -      | 抽屉宽度内容区的宽度，优先级高于bodyStyle内的width |\n| drawerStyle | `React.CSSProperties` | 是   | -      | 设计 Drawer 容器样式                               |\n| bodyStyle   | `React.CSSProperties` | 是   | -      | 可用于设置 Drawer 内容部分的样式                   |\n| zIndex      | `number`              | 否   | -      | 抽屉层级                                           |\n| visible     | `boolean`             | 否   | -      | 遮罩层是否显示                                     |\n\n## Events\n\n| 事件       | detail                             | 说明                                                          |\n| ---------- | ---------------------------------- | ------------------------------------------------------------- |\n| open       | `void`                             | 抽屉打开事件                                                  |\n| close      | `void`                             | 抽屉关闭事件                                                  |\n| tab.change | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |\n\n## Methods\n\n| 方法  | 参数         | 返回值 | 说明     |\n| ----- | ------------ | ------ | -------- |\n| open  | `() => void` | `void` | 打开抽屉 |\n| close | `() => void` | `void` | 关闭抽屉 |\n\n## Examples\n\n### Basic\n\n展示带有三个标签页的基础抽屉，默认展开并高亮第一个标签。\n\n```yaml preview\n- brick: data-view.tabs-drawer\n  properties:\n    activeKey: search\n    id: drawer\n    visible: true\n    width: 800\n    style:\n      height: 600px\n      display: block\n    tabList:\n      - tooltip: 搜索\n        key: search\n        icon:\n          lib: fa\n          icon: search\n          prefix: fas\n      - tooltip: 内容\n        key: app\n        icon:\n          lib: easyops\n          category: app\n          icon: micro-app-configuration\n      - tooltip: 图表\n        key: chart\n        icon:\n          lib: fa\n          icon: ad\n          prefix: fas\n  slots:\n    search:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            style:\n              padding: 0 16px\n              height: 100px\n              background: red\n            textContent: 测试\n    app:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 内容区域\n            style:\n              background: yellow\n              height: 100px\n    chart:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 图表区域\n            style:\n              background: green\n              height: 100px\n  events:\n    close:\n      - action: console.log\n    tab.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-drawer\n#   active-key=\"search\"\n#   visible\n#   style=\"height: 600px; display: block\"\n#   id=\"drawer\"\n# >\n#   <div slot=\"search\" style=\"padding: 0 16px; height: 100px; background: red\">\n#     测试\n#   </div>\n#   <div slot=\"app\" style=\"background: yellow; height: 100px\">内容区域</div>\n#   <div slot=\"chart\" style=\"background: green; height: 100px\">图表区域</div>\n# </data-view.tabs-drawer>\n# \n# <script>\n#   const drawer = document.getElementById(\"drawer\");\n#   drawer.width = 800;\n#   drawer.tabList = [\n#     {\n#       tooltip: \"搜索\",\n#       key: \"search\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"search\",\n#         prefix: \"fas\",\n#       },\n#     },\n#     {\n#       tooltip: \"内容\",\n#       key: \"app\",\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"app\",\n#         icon: \"micro-app-configuration\",\n#       },\n#     },\n#     {\n#       tooltip: \"图表\",\n#       key: \"chart\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"ad\",\n#         prefix: \"fas\",\n#       },\n#     },\n#   ];\n#   drawer.addEventListener(\"close\", (e) => {\n#     console.log(e.detail);\n#   });\n#   drawer.addEventListener(\"tab.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Method Control\n\n通过调用 open/close 方法程序化控制抽屉的展开与收起。\n\n```yaml preview\n- brick: eo-button\n  properties:\n    textContent: 打开抽屉\n  events:\n    click:\n      - target: \"#controlled-drawer\"\n        method: open\n- brick: data-view.tabs-drawer\n  properties:\n    id: controlled-drawer\n    style:\n      height: 500px\n      display: block\n    tabList:\n      - tooltip: 信息\n        key: info\n        icon:\n          lib: antd\n          icon: info-circle\n    zIndex: 100\n  slots:\n    info:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 抽屉内容区域\n            style:\n              padding: 16px\n  events:\n    open:\n      - action: console.log\n    close:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-button id=\"brick-1\">打开抽屉</eo-button>\n# <data-view.tabs-drawer\n#   style=\"height: 500px; display: block\"\n#   z-index=\"100\"\n#   id=\"controlled-drawer\"\n# >\n#   <div slot=\"info\" style=\"padding: 16px\">抽屉内容区域</div>\n# </data-view.tabs-drawer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#controlled-drawer\");\n#     brick.open();\n#   });\n# \n#   const controlled_drawer = document.getElementById(\"controlled-drawer\");\n#   controlled_drawer.tabList = [\n#     {\n#       tooltip: \"信息\",\n#       key: \"info\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"info-circle\",\n#       },\n#     },\n#   ];\n#   controlled_drawer.addEventListener(\"open\", (e) => {\n#     console.log(e.detail);\n#   });\n#   controlled_drawer.addEventListener(\"close\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.modern-style-treemap": {
-    "doc": "data-view.modern-style-treemap\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-treemap\n  properties:\n    data:\n      name: flare\n      children:\n        - name: analytics\n          children:\n            - name: cluster\n              children:\n                - name: AgglomerativeCluster\n                  value: 3938\n                - name: CommunityStructure\n                  value: 3812\n                - name: HierarchicalCluster\n                  value: 6714\n                - name: MergeEdge\n                  value: 743\n            - name: graph\n              children:\n                - name: BetweennessCentrality\n                  value: 3534\n                - name: LinkDistance\n                  value: 5731\n                - name: MaxFlowMinCut\n                  value: 7840\n                - name: ShortestPaths\n                  value: 5914\n                - name: SpanningTree\n                  value: 3416\n            - name: optimization\n              children:\n                - name: AspectRatioBanker\n                  value: 7074\n        - name: animate\n          children:\n            - name: Easing\n              value: 17010\n            - name: FunctionSequence\n              value: 5842\n            - name: interpolate\n              children:\n                - name: ArrayInterpolator\n                  value: 1983\n                - name: ColorInterpolator\n                  value: 2047\n                - name: DateInterpolator\n                  value: 1375\n                - name: Interpolator\n                  value: 8746\n                - name: MatrixInterpolator\n                  value: 2202\n                - name: NumberInterpolator\n                  value: 1382\n                - name: ObjectInterpolator\n                  value: 1629\n                - name: PointInterpolator\n                  value: 1675\n                - name: RectangleInterpolator\n                  value: 2042\n            - name: ISchedulable\n              value: 1041\n            - name: Parallel\n              value: 5176\n            - name: Pause\n              value: 449\n            - name: Scheduler\n              value: 5593\n            - name: Sequence\n              value: 5534\n            - name: Transition\n              value: 9201\n            - name: Transitioner\n              value: 19975\n            - name: TransitionEvent\n              value: 1116\n            - name: Tween\n              value: 6006\n        - name: data\n          children:\n            - name: converters\n              children:\n                - name: Converters\n                  value: 721\n                - name: DelimitedTextConverter\n                  value: 4294\n                - name: GraphMLConverter\n                  value: 9800\n                - name: IDataConverter\n                  value: 1314\n                - name: JSONConverter\n                  value: 2220\n            - name: DataField\n              value: 1759\n            - name: DataSchema\n              value: 2165\n            - name: DataSet\n              value: 586\n            - name: DataSource\n              value: 3331\n            - name: DataTable\n              value: 772\n            - name: DataUtil\n              value: 3322\n        - name: display\n          children:\n            - name: DirtySprite\n              value: 8833\n            - name: LineSprite\n              value: 1732\n            - name: RectSprite\n              value: 3623\n            - name: TextSprite\n              value: 10066\n        - name: flex\n          children:\n            - name: FlareVis\n              value: 4116\n        - name: physics\n          children:\n            - name: DragForce\n              value: 1082\n            - name: GravityForce\n              value: 1336\n            - name: IForce\n              value: 319\n            - name: NBodyForce\n              value: 10498\n            - name: Particle\n              value: 2822\n            - name: Simulation\n              value: 9983\n            - name: Spring\n              value: 2213\n            - name: SpringForce\n              value: 1681\n        - name: query\n          children:\n            - name: AggregateExpression\n              value: 1616\n            - name: And\n              value: 1027\n            - name: Arithmetic\n              value: 3891\n            - name: Average\n              value: 891\n            - name: BinaryExpression\n              value: 2893\n            - name: Comparison\n              value: 5103\n            - name: CompositeExpression\n              value: 3677\n            - name: Count\n              value: 781\n            - name: DateUtil\n              value: 4141\n            - name: Distinct\n              value: 933\n            - name: Expression\n              value: 5130\n            - name: ExpressionIterator\n              value: 3617\n            - name: Fn\n              value: 3240\n            - name: If\n              value: 2732\n            - name: IsA\n              value: 2039\n            - name: Literal\n              value: 1214\n            - name: Match\n              value: 3748\n            - name: Maximum\n              value: 843\n            - name: methods\n              children:\n                - name: add\n                  value: 593\n                - name: and\n                  value: 330\n                - name: average\n                  value: 287\n                - name: count\n                  value: 277\n                - name: distinct\n                  value: 292\n                - name: div\n                  value: 595\n                - name: eq\n                  value: 594\n                - name: fn\n                  value: 460\n                - name: gt\n                  value: 603\n                - name: gte\n                  value: 625\n                - name: iff\n                  value: 748\n                - name: isa\n                  value: 461\n                - name: lt\n                  value: 597\n                - name: lte\n                  value: 619\n                - name: max\n                  value: 283\n                - name: min\n                  value: 283\n                - name: mod\n                  value: 591\n                - name: mul\n                  value: 603\n                - name: neq\n                  value: 599\n                - name: not\n                  value: 386\n                - name: or\n                  value: 323\n                - name: orderby\n                  value: 307\n                - name: range\n                  value: 772\n                - name: select\n                  value: 296\n                - name: stddev\n                  value: 363\n                - name: sub\n                  value: 600\n                - name: sum\n                  value: 280\n                - name: update\n                  value: 307\n                - name: variance\n                  value: 335\n                - name: where\n                  value: 299\n                - name: xor\n                  value: 354\n                - name: _\n                  value: 264\n            - name: Minimum\n              value: 843\n            - name: Not\n              value: 1554\n            - name: Or\n              value: 970\n            - name: Query\n              value: 13896\n            - name: Range\n              value: 1594\n            - name: StringUtil\n              value: 4130\n            - name: Sum\n              value: 791\n            - name: Variable\n              value: 1124\n            - name: Variance\n              value: 1876\n            - name: Xor\n              value: 1101\n        - name: scale\n          children:\n            - name: IScaleMap\n              value: 2105\n            - name: LinearScale\n              value: 1316\n            - name: LogScale\n              value: 3151\n            - name: OrdinalScale\n              value: 3770\n            - name: QuantileScale\n              value: 2435\n            - name: QuantitativeScale\n              value: 4839\n            - name: RootScale\n              value: 1756\n            - name: Scale\n              value: 4268\n            - name: ScaleType\n              value: 1821\n            - name: TimeScale\n              value: 5833\n        - name: util\n          children:\n            - name: Arrays\n              value: 8258\n            - name: Colors\n              value: 10001\n            - name: Dates\n              value: 8217\n            - name: Displays\n              value: 12555\n            - name: Filter\n              value: 2324\n            - name: Geometry\n              value: 10993\n            - name: heap\n              children:\n                - name: FibonacciHeap\n                  value: 9354\n                - name: HeapNode\n                  value: 1233\n            - name: IEvaluable\n              value: 335\n            - name: IPredicate\n              value: 383\n            - name: IValueProxy\n              value: 874\n            - name: math\n              children:\n                - name: DenseMatrix\n                  value: 3165\n                - name: IMatrix\n                  value: 2815\n                - name: SparseMatrix\n                  value: 3366\n            - name: Maths\n              value: 17705\n            - name: Orientation\n              value: 1486\n            - name: palette\n              children:\n                - name: ColorPalette\n                  value: 6367\n                - name: Palette\n                  value: 1229\n                - name: ShapePalette\n                  value: 2059\n                - name: SizePalette\n                  value: 2291\n            - name: Property\n              value: 5559\n            - name: Shapes\n              value: 19118\n            - name: Sort\n              value: 6887\n            - name: Stats\n              value: 6557\n            - name: Strings\n              value: 22026\n        - name: vis\n          children:\n            - name: axis\n              children:\n                - name: Axes\n                  value: 1302\n                - name: Axis\n                  value: 24593\n                - name: AxisGridLine\n                  value: 652\n                - name: AxisLabel\n                  value: 636\n                - name: CartesianAxes\n                  value: 6703\n            - name: controls\n              children:\n                - name: AnchorControl\n                  value: 2138\n                - name: ClickControl\n                  value: 3824\n                - name: Control\n                  value: 1353\n                - name: ControlList\n                  value: 4665\n                - name: DragControl\n                  value: 2649\n                - name: ExpandControl\n                  value: 2832\n                - name: HoverControl\n                  value: 4896\n                - name: IControl\n                  value: 763\n                - name: PanZoomControl\n                  value: 5222\n                - name: SelectionControl\n                  value: 7862\n                - name: TooltipControl\n                  value: 8435\n            - name: data\n              children:\n                - name: Data\n                  value: 20544\n                - name: DataList\n                  value: 19788\n                - name: DataSprite\n                  value: 10349\n                - name: EdgeSprite\n                  value: 3301\n                - name: NodeSprite\n                  value: 19382\n                - name: render\n                  children:\n                    - name: ArrowType\n                      value: 698\n                    - name: EdgeRenderer\n                      value: 5569\n                    - name: IRenderer\n                      value: 353\n                    - name: ShapeRenderer\n                      value: 2247\n                - name: ScaleBinding\n                  value: 11275\n                - name: Tree\n                  value: 7147\n                - name: TreeBuilder\n                  value: 9930\n            - name: events\n              children:\n                - name: DataEvent\n                  value: 2313\n                - name: SelectionEvent\n                  value: 1880\n                - name: TooltipEvent\n                  value: 1701\n                - name: VisualizationEvent\n                  value: 1117\n            - name: legend\n              children:\n                - name: Legend\n                  value: 20859\n                - name: LegendItem\n                  value: 4614\n                - name: LegendRange\n                  value: 10530\n            - name: operator\n              children:\n                - name: distortion\n                  children:\n                    - name: BifocalDistortion\n                      value: 4461\n                    - name: Distortion\n                      value: 6314\n                    - name: FisheyeDistortion\n                      value: 3444\n                - name: encoder\n                  children:\n                    - name: ColorEncoder\n                      value: 3179\n                    - name: Encoder\n                      value: 4060\n                    - name: PropertyEncoder\n                      value: 4138\n                    - name: ShapeEncoder\n                      value: 1690\n                    - name: SizeEncoder\n                      value: 1830\n                - name: filter\n                  children:\n                    - name: FisheyeTreeFilter\n                      value: 5219\n                    - name: GraphDistanceFilter\n                      value: 3165\n                    - name: VisibilityFilter\n                      value: 3509\n                - name: IOperator\n                  value: 1286\n                - name: label\n                  children:\n                    - name: Labeler\n                      value: 9956\n                    - name: RadialLabeler\n                      value: 3899\n                    - name: StackedAreaLabeler\n                      value: 3202\n                - name: layout\n                  children:\n                    - name: AxisLayout\n                      value: 6725\n                    - name: BundledEdgeRouter\n                      value: 3727\n                    - name: CircleLayout\n                      value: 9317\n                    - name: CirclePackingLayout\n                      value: 12003\n                    - name: DendrogramLayout\n                      value: 4853\n                    - name: ForceDirectedLayout\n                      value: 8411\n                    - name: IcicleTreeLayout\n                      value: 4864\n                    - name: IndentedTreeLayout\n                      value: 3174\n                    - name: Layout\n                      value: 7881\n                    - name: NodeLinkTreeLayout\n                      value: 12870\n                    - name: PieLayout\n                      value: 2728\n                    - name: RadialTreeLayout\n                      value: 12348\n                    - name: RandomLayout\n                      value: 870\n                    - name: StackedAreaLayout\n                      value: 9121\n                    - name: TreeMapLayout\n                      value: 9191\n                - name: Operator\n                  value: 2490\n                - name: OperatorList\n                  value: 5248\n                - name: OperatorSequence\n                  value: 4190\n                - name: OperatorSwitch\n                  value: 2581\n                - name: SortOperator\n                  value: 2023\n            - name: Visualization\n              value: 16540\n    style:\n      width: 100%\n      height: 800px\n      display: block\n      background-color: \"#1c1e21\"\n    tooltipUseBrick:\n      useBrick:\n        brick: span\n        properties:\n          textContent: <% DATA.data?.name %>\n    leafUseBrick:\n      useBrick:\n        - if: <% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\n          brick: div\n          properties:\n            style:\n              padding: \"8px 6px\"\n          slots:\n            \"\":\n              type: bricks\n              bricks:\n                - brick: div\n                  properties:\n                    textContent: <% DATA.data.name %>\n                    style:\n                      \"font-size\": \"20px\"\n                      \"font-weight\": 500\n                      color: \"#FFFFFF\"\n                      \"line-height\": \"28px\"\n                      \"text-shadow\": \"0px 1px 4px #3366FF\"\n                      overflow: \"hidden\"\n                      \"white-space\": \"nowrap\"\n                      \"text-overflow\": \"ellipsis\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-treemap\n#   style=\"width: 100%; height: 800px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-treemap>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = {\n#     name: \"flare\",\n#     children: [\n#       {\n#         name: \"analytics\",\n#         children: [\n#           {\n#             name: \"cluster\",\n#             children: [\n#               {\n#                 name: \"AgglomerativeCluster\",\n#                 value: 3938,\n#               },\n#               {\n#                 name: \"CommunityStructure\",\n#                 value: 3812,\n#               },\n#               {\n#                 name: \"HierarchicalCluster\",\n#                 value: 6714,\n#               },\n#               {\n#                 name: \"MergeEdge\",\n#                 value: 743,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"graph\",\n#             children: [\n#               {\n#                 name: \"BetweennessCentrality\",\n#                 value: 3534,\n#               },\n#               {\n#                 name: \"LinkDistance\",\n#                 value: 5731,\n#               },\n#               {\n#                 name: \"MaxFlowMinCut\",\n#                 value: 7840,\n#               },\n#               {\n#                 name: \"ShortestPaths\",\n#                 value: 5914,\n#               },\n#               {\n#                 name: \"SpanningTree\",\n#                 value: 3416,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"optimization\",\n#             children: [\n#               {\n#                 name: \"AspectRatioBanker\",\n#                 value: 7074,\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#       {\n#         name: \"animate\",\n#         children: [\n#           {\n#             name: \"Easing\",\n#             value: 17010,\n#           },\n#           {\n#             name: \"FunctionSequence\",\n#             value: 5842,\n#           },\n#           {\n#             name: \"interpolate\",\n#             children: [\n#               {\n#                 name: \"ArrayInterpolator\",\n#                 value: 1983,\n#               },\n#               {\n#                 name: \"ColorInterpolator\",\n#                 value: 2047,\n#               },\n#               {\n#                 name: \"DateInterpolator\",\n#                 value: 1375,\n#               },\n#               {\n#                 name: \"Interpolator\",\n#                 value: 8746,\n#               },\n#               {\n#                 name: \"MatrixInterpolator\",\n#                 value: 2202,\n#               },\n#               {\n#                 name: \"NumberInterpolator\",\n#                 value: 1382,\n#               },\n#               {\n#                 name: \"ObjectInterpolator\",\n#                 value: 1629,\n#               },\n#               {\n#                 name: \"PointInterpolator\",\n#                 value: 1675,\n#               },\n#               {\n#                 name: \"RectangleInterpolator\",\n#                 value: 2042,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"ISchedulable\",\n#             value: 1041,\n#           },\n#           {\n#             name: \"Parallel\",\n#             value: 5176,\n#           },\n#           {\n#             name: \"Pause\",\n#             value: 449,\n#           },\n#           {\n#             name: \"Scheduler\",\n#             value: 5593,\n#           },\n#           {\n#             name: \"Sequence\",\n#             value: 5534,\n#           },\n#           {\n#             name: \"Transition\",\n#             value: 9201,\n#           },\n#           {\n#             name: \"Transitioner\",\n#             value: 19975,\n#           },\n#           {\n#             name: \"TransitionEvent\",\n#             value: 1116,\n#           },\n#           {\n#             name: \"Tween\",\n#             value: 6006,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"data\",\n#         children: [\n#           {\n#             name: \"converters\",\n#             children: [\n#               {\n#                 name: \"Converters\",\n#                 value: 721,\n#               },\n#               {\n#                 name: \"DelimitedTextConverter\",\n#                 value: 4294,\n#               },\n#               {\n#                 name: \"GraphMLConverter\",\n#                 value: 9800,\n#               },\n#               {\n#                 name: \"IDataConverter\",\n#                 value: 1314,\n#               },\n#               {\n#                 name: \"JSONConverter\",\n#                 value: 2220,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"DataField\",\n#             value: 1759,\n#           },\n#           {\n#             name: \"DataSchema\",\n#             value: 2165,\n#           },\n#           {\n#             name: \"DataSet\",\n#             value: 586,\n#           },\n#           {\n#             name: \"DataSource\",\n#             value: 3331,\n#           },\n#           {\n#             name: \"DataTable\",\n#             value: 772,\n#           },\n#           {\n#             name: \"DataUtil\",\n#             value: 3322,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"display\",\n#         children: [\n#           {\n#             name: \"DirtySprite\",\n#             value: 8833,\n#           },\n#           {\n#             name: \"LineSprite\",\n#             value: 1732,\n#           },\n#           {\n#             name: \"RectSprite\",\n#             value: 3623,\n#           },\n#           {\n#             name: \"TextSprite\",\n#             value: 10066,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"flex\",\n#         children: [\n#           {\n#             name: \"FlareVis\",\n#             value: 4116,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"physics\",\n#         children: [\n#           {\n#             name: \"DragForce\",\n#             value: 1082,\n#           },\n#           {\n#             name: \"GravityForce\",\n#             value: 1336,\n#           },\n#           {\n#             name: \"IForce\",\n#             value: 319,\n#           },\n#           {\n#             name: \"NBodyForce\",\n#             value: 10498,\n#           },\n#           {\n#             name: \"Particle\",\n#             value: 2822,\n#           },\n#           {\n#             name: \"Simulation\",\n#             value: 9983,\n#           },\n#           {\n#             name: \"Spring\",\n#             value: 2213,\n#           },\n#           {\n#             name: \"SpringForce\",\n#             value: 1681,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"query\",\n#         children: [\n#           {\n#             name: \"AggregateExpression\",\n#             value: 1616,\n#           },\n#           {\n#             name: \"And\",\n#             value: 1027,\n#           },\n#           {\n#             name: \"Arithmetic\",\n#             value: 3891,\n#           },\n#           {\n#             name: \"Average\",\n#             value: 891,\n#           },\n#           {\n#             name: \"BinaryExpression\",\n#             value: 2893,\n#           },\n#           {\n#             name: \"Comparison\",\n#             value: 5103,\n#           },\n#           {\n#             name: \"CompositeExpression\",\n#             value: 3677,\n#           },\n#           {\n#             name: \"Count\",\n#             value: 781,\n#           },\n#           {\n#             name: \"DateUtil\",\n#             value: 4141,\n#           },\n#           {\n#             name: \"Distinct\",\n#             value: 933,\n#           },\n#           {\n#             name: \"Expression\",\n#             value: 5130,\n#           },\n#           {\n#             name: \"ExpressionIterator\",\n#             value: 3617,\n#           },\n#           {\n#             name: \"Fn\",\n#             value: 3240,\n#           },\n#           {\n#             name: \"If\",\n#             value: 2732,\n#           },\n#           {\n#             name: \"IsA\",\n#             value: 2039,\n#           },\n#           {\n#             name: \"Literal\",\n#             value: 1214,\n#           },\n#           {\n#             name: \"Match\",\n#             value: 3748,\n#           },\n#           {\n#             name: \"Maximum\",\n#             value: 843,\n#           },\n#           {\n#             name: \"methods\",\n#             children: [\n#               {\n#                 name: \"add\",\n#                 value: 593,\n#               },\n#               {\n#                 name: \"and\",\n#                 value: 330,\n#               },\n#               {\n#                 name: \"average\",\n#                 value: 287,\n#               },\n#               {\n#                 name: \"count\",\n#                 value: 277,\n#               },\n#               {\n#                 name: \"distinct\",\n#                 value: 292,\n#               },\n#               {\n#                 name: \"div\",\n#                 value: 595,\n#               },\n#               {\n#                 name: \"eq\",\n#                 value: 594,\n#               },\n#               {\n#                 name: \"fn\",\n#                 value: 460,\n#               },\n#               {\n#                 name: \"gt\",\n#                 value: 603,\n#               },\n#               {\n#                 name: \"gte\",\n#                 value: 625,\n#               },\n#               {\n#                 name: \"iff\",\n#                 value: 748,\n#               },\n#               {\n#                 name: \"isa\",\n#                 value: 461,\n#               },\n#               {\n#                 name: \"lt\",\n#                 value: 597,\n#               },\n#               {\n#                 name: \"lte\",\n#                 value: 619,\n#               },\n#               {\n#                 name: \"max\",\n#                 value: 283,\n#               },\n#               {\n#                 name: \"min\",\n#                 value: 283,\n#               },\n#               {\n#                 name: \"mod\",\n#                 value: 591,\n#               },\n#               {\n#                 name: \"mul\",\n#                 value: 603,\n#               },\n#               {\n#                 name: \"neq\",\n#                 value: 599,\n#               },\n#               {\n#                 name: \"not\",\n#                 value: 386,\n#               },\n#               {\n#                 name: \"or\",\n#                 value: 323,\n#               },\n#               {\n#                 name: \"orderby\",\n#                 value: 307,\n#               },\n#               {\n#                 name: \"range\",\n#                 value: 772,\n#               },\n#               {\n#                 name: \"select\",\n#                 value: 296,\n#               },\n#               {\n#                 name: \"stddev\",\n#                 value: 363,\n#               },\n#               {\n#                 name: \"sub\",\n#                 value: 600,\n#               },\n#               {\n#                 name: \"sum\",\n#                 value: 280,\n#               },\n#               {\n#                 name: \"update\",\n#                 value: 307,\n#               },\n#               {\n#                 name: \"variance\",\n#                 value: 335,\n#               },\n#               {\n#                 name: \"where\",\n#                 value: 299,\n#               },\n#               {\n#                 name: \"xor\",\n#                 value: 354,\n#               },\n#               {\n#                 name: \"_\",\n#                 value: 264,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Minimum\",\n#             value: 843,\n#           },\n#           {\n#             name: \"Not\",\n#             value: 1554,\n#           },\n#           {\n#             name: \"Or\",\n#             value: 970,\n#           },\n#           {\n#             name: \"Query\",\n#             value: 13896,\n#           },\n#           {\n#             name: \"Range\",\n#             value: 1594,\n#           },\n#           {\n#             name: \"StringUtil\",\n#             value: 4130,\n#           },\n#           {\n#             name: \"Sum\",\n#             value: 791,\n#           },\n#           {\n#             name: \"Variable\",\n#             value: 1124,\n#           },\n#           {\n#             name: \"Variance\",\n#             value: 1876,\n#           },\n#           {\n#             name: \"Xor\",\n#             value: 1101,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"scale\",\n#         children: [\n#           {\n#             name: \"IScaleMap\",\n#             value: 2105,\n#           },\n#           {\n#             name: \"LinearScale\",\n#             value: 1316,\n#           },\n#           {\n#             name: \"LogScale\",\n#             value: 3151,\n#           },\n#           {\n#             name: \"OrdinalScale\",\n#             value: 3770,\n#           },\n#           {\n#             name: \"QuantileScale\",\n#             value: 2435,\n#           },\n#           {\n#             name: \"QuantitativeScale\",\n#             value: 4839,\n#           },\n#           {\n#             name: \"RootScale\",\n#             value: 1756,\n#           },\n#           {\n#             name: \"Scale\",\n#             value: 4268,\n#           },\n#           {\n#             name: \"ScaleType\",\n#             value: 1821,\n#           },\n#           {\n#             name: \"TimeScale\",\n#             value: 5833,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"util\",\n#         children: [\n#           {\n#             name: \"Arrays\",\n#             value: 8258,\n#           },\n#           {\n#             name: \"Colors\",\n#             value: 10001,\n#           },\n#           {\n#             name: \"Dates\",\n#             value: 8217,\n#           },\n#           {\n#             name: \"Displays\",\n#             value: 12555,\n#           },\n#           {\n#             name: \"Filter\",\n#             value: 2324,\n#           },\n#           {\n#             name: \"Geometry\",\n#             value: 10993,\n#           },\n#           {\n#             name: \"heap\",\n#             children: [\n#               {\n#                 name: \"FibonacciHeap\",\n#                 value: 9354,\n#               },\n#               {\n#                 name: \"HeapNode\",\n#                 value: 1233,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"IEvaluable\",\n#             value: 335,\n#           },\n#           {\n#             name: \"IPredicate\",\n#             value: 383,\n#           },\n#           {\n#             name: \"IValueProxy\",\n#             value: 874,\n#           },\n#           {\n#             name: \"math\",\n#             children: [\n#               {\n#                 name: \"DenseMatrix\",\n#                 value: 3165,\n#               },\n#               {\n#                 name: \"IMatrix\",\n#                 value: 2815,\n#               },\n#               {\n#                 name: \"SparseMatrix\",\n#                 value: 3366,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Maths\",\n#             value: 17705,\n#           },\n#           {\n#             name: \"Orientation\",\n#             value: 1486,\n#           },\n#           {\n#             name: \"palette\",\n#             children: [\n#               {\n#                 name: \"ColorPalette\",\n#                 value: 6367,\n#               },\n#               {\n#                 name: \"Palette\",\n#                 value: 1229,\n#               },\n#               {\n#                 name: \"ShapePalette\",\n#                 value: 2059,\n#               },\n#               {\n#                 name: \"SizePalette\",\n#                 value: 2291,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Property\",\n#             value: 5559,\n#           },\n#           {\n#             name: \"Shapes\",\n#             value: 19118,\n#           },\n#           {\n#             name: \"Sort\",\n#             value: 6887,\n#           },\n#           {\n#             name: \"Stats\",\n#             value: 6557,\n#           },\n#           {\n#             name: \"Strings\",\n#             value: 22026,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"vis\",\n#         children: [\n#           {\n#             name: \"axis\",\n#             children: [\n#               {\n#                 name: \"Axes\",\n#                 value: 1302,\n#               },\n#               {\n#                 name: \"Axis\",\n#                 value: 24593,\n#               },\n#               {\n#                 name: \"AxisGridLine\",\n#                 value: 652,\n#               },\n#               {\n#                 name: \"AxisLabel\",\n#                 value: 636,\n#               },\n#               {\n#                 name: \"CartesianAxes\",\n#                 value: 6703,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"controls\",\n#             children: [\n#               {\n#                 name: \"AnchorControl\",\n#                 value: 2138,\n#               },\n#               {\n#                 name: \"ClickControl\",\n#                 value: 3824,\n#               },\n#               {\n#                 name: \"Control\",\n#                 value: 1353,\n#               },\n#               {\n#                 name: \"ControlList\",\n#                 value: 4665,\n#               },\n#               {\n#                 name: \"DragControl\",\n#                 value: 2649,\n#               },\n#               {\n#                 name: \"ExpandControl\",\n#                 value: 2832,\n#               },\n#               {\n#                 name: \"HoverControl\",\n#                 value: 4896,\n#               },\n#               {\n#                 name: \"IControl\",\n#                 value: 763,\n#               },\n#               {\n#                 name: \"PanZoomControl\",\n#                 value: 5222,\n#               },\n#               {\n#                 name: \"SelectionControl\",\n#                 value: 7862,\n#               },\n#               {\n#                 name: \"TooltipControl\",\n#                 value: 8435,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"data\",\n#             children: [\n#               {\n#                 name: \"Data\",\n#                 value: 20544,\n#               },\n#               {\n#                 name: \"DataList\",\n#                 value: 19788,\n#               },\n#               {\n#                 name: \"DataSprite\",\n#                 value: 10349,\n#               },\n#               {\n#                 name: \"EdgeSprite\",\n#                 value: 3301,\n#               },\n#               {\n#                 name: \"NodeSprite\",\n#                 value: 19382,\n#               },\n#               {\n#                 name: \"render\",\n#                 children: [\n#                   {\n#                     name: \"ArrowType\",\n#                     value: 698,\n#                   },\n#                   {\n#                     name: \"EdgeRenderer\",\n#                     value: 5569,\n#                   },\n#                   {\n#                     name: \"IRenderer\",\n#                     value: 353,\n#                   },\n#                   {\n#                     name: \"ShapeRenderer\",\n#                     value: 2247,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"ScaleBinding\",\n#                 value: 11275,\n#               },\n#               {\n#                 name: \"Tree\",\n#                 value: 7147,\n#               },\n#               {\n#                 name: \"TreeBuilder\",\n#                 value: 9930,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"events\",\n#             children: [\n#               {\n#                 name: \"DataEvent\",\n#                 value: 2313,\n#               },\n#               {\n#                 name: \"SelectionEvent\",\n#                 value: 1880,\n#               },\n#               {\n#                 name: \"TooltipEvent\",\n#                 value: 1701,\n#               },\n#               {\n#                 name: \"VisualizationEvent\",\n#                 value: 1117,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"legend\",\n#             children: [\n#               {\n#                 name: \"Legend\",\n#                 value: 20859,\n#               },\n#               {\n#                 name: \"LegendItem\",\n#                 value: 4614,\n#               },\n#               {\n#                 name: \"LegendRange\",\n#                 value: 10530,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"operator\",\n#             children: [\n#               {\n#                 name: \"distortion\",\n#                 children: [\n#                   {\n#                     name: \"BifocalDistortion\",\n#                     value: 4461,\n#                   },\n#                   {\n#                     name: \"Distortion\",\n#                     value: 6314,\n#                   },\n#                   {\n#                     name: \"FisheyeDistortion\",\n#                     value: 3444,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"encoder\",\n#                 children: [\n#                   {\n#                     name: \"ColorEncoder\",\n#                     value: 3179,\n#                   },\n#                   {\n#                     name: \"Encoder\",\n#                     value: 4060,\n#                   },\n#                   {\n#                     name: \"PropertyEncoder\",\n#                     value: 4138,\n#                   },\n#                   {\n#                     name: \"ShapeEncoder\",\n#                     value: 1690,\n#                   },\n#                   {\n#                     name: \"SizeEncoder\",\n#                     value: 1830,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"filter\",\n#                 children: [\n#                   {\n#                     name: \"FisheyeTreeFilter\",\n#                     value: 5219,\n#                   },\n#                   {\n#                     name: \"GraphDistanceFilter\",\n#                     value: 3165,\n#                   },\n#                   {\n#                     name: \"VisibilityFilter\",\n#                     value: 3509,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"IOperator\",\n#                 value: 1286,\n#               },\n#               {\n#                 name: \"label\",\n#                 children: [\n#                   {\n#                     name: \"Labeler\",\n#                     value: 9956,\n#                   },\n#                   {\n#                     name: \"RadialLabeler\",\n#                     value: 3899,\n#                   },\n#                   {\n#                     name: \"StackedAreaLabeler\",\n#                     value: 3202,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"layout\",\n#                 children: [\n#                   {\n#                     name: \"AxisLayout\",\n#                     value: 6725,\n#                   },\n#                   {\n#                     name: \"BundledEdgeRouter\",\n#                     value: 3727,\n#                   },\n#                   {\n#                     name: \"CircleLayout\",\n#                     value: 9317,\n#                   },\n#                   {\n#                     name: \"CirclePackingLayout\",\n#                     value: 12003,\n#                   },\n#                   {\n#                     name: \"DendrogramLayout\",\n#                     value: 4853,\n#                   },\n#                   {\n#                     name: \"ForceDirectedLayout\",\n#                     value: 8411,\n#                   },\n#                   {\n#                     name: \"IcicleTreeLayout\",\n#                     value: 4864,\n#                   },\n#                   {\n#                     name: \"IndentedTreeLayout\",\n#                     value: 3174,\n#                   },\n#                   {\n#                     name: \"Layout\",\n#                     value: 7881,\n#                   },\n#                   {\n#                     name: \"NodeLinkTreeLayout\",\n#                     value: 12870,\n#                   },\n#                   {\n#                     name: \"PieLayout\",\n#                     value: 2728,\n#                   },\n#                   {\n#                     name: \"RadialTreeLayout\",\n#                     value: 12348,\n#                   },\n#                   {\n#                     name: \"RandomLayout\",\n#                     value: 870,\n#                   },\n#                   {\n#                     name: \"StackedAreaLayout\",\n#                     value: 9121,\n#                   },\n#                   {\n#                     name: \"TreeMapLayout\",\n#                     value: 9191,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"Operator\",\n#                 value: 2490,\n#               },\n#               {\n#                 name: \"OperatorList\",\n#                 value: 5248,\n#               },\n#               {\n#                 name: \"OperatorSequence\",\n#                 value: 4190,\n#               },\n#               {\n#                 name: \"OperatorSwitch\",\n#                 value: 2581,\n#               },\n#               {\n#                 name: \"SortOperator\",\n#                 value: 2023,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Visualization\",\n#             value: 16540,\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.tooltipUseBrick = {\n#     useBrick: {\n#       brick: \"span\",\n#       properties: {\n#         textContent: \"<% DATA.data?.name %>\",\n#       },\n#     },\n#   };\n#   brick_1.leafUseBrick = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\",\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"8px 6px\",\n#           },\n#         },\n#         slots: {\n#           \"\": {\n#             type: \"bricks\",\n#             bricks: [\n#               {\n#                 brick: \"div\",\n#                 properties: {\n#                   textContent: \"<% DATA.data.name %>\",\n#                   style: {\n#                     \"font-size\": \"20px\",\n#                     \"font-weight\": 500,\n#                     color: \"#FFFFFF\",\n#                     \"line-height\": \"28px\",\n#                     \"text-shadow\": \"0px 1px 4px #3366FF\",\n#                     overflow: \"hidden\",\n#                     \"white-space\": \"nowrap\",\n#                     \"text-overflow\": \"ellipsis\",\n#                   },\n#                 },\n#               },\n#             ],\n#           },\n#         },\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.modern-style-treemap\ndisplayName: WrappedDataViewModernStyleTreemap\ndescription: 现代风树图\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.modern-style-treemap\n\n> 现代风树图\n\n## Props\n\n| 属性               | 类型                                                                                                                   | 必填 | 默认值              | 说明              |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | ---- | ------------------- | ----------------- |\n| data               | `TreemapData`                                                                                                          | 是   | -                   | 数据              |\n| tail               | `\"treemapBinary\" \\| \"treemapDice\" \\| \"treemapResquarify\" \\| \"treemapSlice\" \\| \"treemapSliceDice\" \\| \"treemapSquarify\"` | 否   | `\"treemapSquarify\"` | 平铺方法          |\n| leafUseBrick       | `{ useBrick: UseBrickConf }`                                                                                           | 否   | -                   | 叶子节点 useBrick |\n| leafContainerStyle | `React.CSSProperties`                                                                                                  | 否   | -                   | 叶子节点容器样式  |\n| tooltipUseBrick    | `{ useBrick: UseBrickConf }`                                                                                           | 否   | -                   | tooltip useBrick  |\n| tooltipStyle       | `React.CSSProperties`                                                                                                  | 否   | -                   | tooltip 容器样式  |\n\n## Events\n\n| 事件          | detail                                                                    | 说明               |\n| ------------- | ------------------------------------------------------------------------- | ------------------ |\n| treemap.click | `TreemapData` — { name: 节点名称, value: 节点数值, children: 子节点列表 } | 点击叶子节点时触发 |\n\n## Examples\n\n### Basic\n\n展示现代风树图的基本用法，包含叶子节点自定义渲染和 tooltip 配置。\n\n```yaml preview\n- brick: data-view.modern-style-treemap\n  properties:\n    data:\n      name: flare\n      children:\n        - name: analytics\n          children:\n            - name: cluster\n              children:\n                - name: AgglomerativeCluster\n                  value: 3938\n                - name: CommunityStructure\n                  value: 3812\n                - name: HierarchicalCluster\n                  value: 6714\n                - name: MergeEdge\n                  value: 743\n            - name: graph\n              children:\n                - name: BetweennessCentrality\n                  value: 3534\n                - name: LinkDistance\n                  value: 5731\n                - name: MaxFlowMinCut\n                  value: 7840\n                - name: ShortestPaths\n                  value: 5914\n                - name: SpanningTree\n                  value: 3416\n            - name: optimization\n              children:\n                - name: AspectRatioBanker\n                  value: 7074\n        - name: animate\n          children:\n            - name: Easing\n              value: 17010\n            - name: FunctionSequence\n              value: 5842\n            - name: interpolate\n              children:\n                - name: ArrayInterpolator\n                  value: 1983\n                - name: ColorInterpolator\n                  value: 2047\n                - name: DateInterpolator\n                  value: 1375\n                - name: Interpolator\n                  value: 8746\n                - name: MatrixInterpolator\n                  value: 2202\n                - name: NumberInterpolator\n                  value: 1382\n                - name: ObjectInterpolator\n                  value: 1629\n                - name: PointInterpolator\n                  value: 1675\n                - name: RectangleInterpolator\n                  value: 2042\n            - name: ISchedulable\n              value: 1041\n            - name: Parallel\n              value: 5176\n            - name: Pause\n              value: 449\n            - name: Scheduler\n              value: 5593\n            - name: Sequence\n              value: 5534\n            - name: Transition\n              value: 9201\n            - name: Transitioner\n              value: 19975\n            - name: TransitionEvent\n              value: 1116\n            - name: Tween\n              value: 6006\n        - name: data\n          children:\n            - name: converters\n              children:\n                - name: Converters\n                  value: 721\n                - name: DelimitedTextConverter\n                  value: 4294\n                - name: GraphMLConverter\n                  value: 9800\n                - name: IDataConverter\n                  value: 1314\n                - name: JSONConverter\n                  value: 2220\n            - name: DataField\n              value: 1759\n            - name: DataSchema\n              value: 2165\n            - name: DataSet\n              value: 586\n            - name: DataSource\n              value: 3331\n            - name: DataTable\n              value: 772\n            - name: DataUtil\n              value: 3322\n        - name: display\n          children:\n            - name: DirtySprite\n              value: 8833\n            - name: LineSprite\n              value: 1732\n            - name: RectSprite\n              value: 3623\n            - name: TextSprite\n              value: 10066\n        - name: flex\n          children:\n            - name: FlareVis\n              value: 4116\n        - name: physics\n          children:\n            - name: DragForce\n              value: 1082\n            - name: GravityForce\n              value: 1336\n            - name: IForce\n              value: 319\n            - name: NBodyForce\n              value: 10498\n            - name: Particle\n              value: 2822\n            - name: Simulation\n              value: 9983\n            - name: Spring\n              value: 2213\n            - name: SpringForce\n              value: 1681\n    style:\n      width: 100%\n      height: 800px\n      display: block\n      background-color: \"#1c1e21\"\n    tooltipUseBrick:\n      useBrick:\n        brick: span\n        properties:\n          textContent: <% DATA.data?.name %>\n    leafUseBrick:\n      useBrick:\n        - if: <% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\n          brick: div\n          properties:\n            style:\n              padding: \"8px 6px\"\n          slots:\n            \"\":\n              type: bricks\n              bricks:\n                - brick: div\n                  properties:\n                    textContent: <% DATA.data.name %>\n                    style:\n                      \"font-size\": \"20px\"\n                      \"font-weight\": 500\n                      color: \"#FFFFFF\"\n                      \"line-height\": \"28px\"\n                      \"text-shadow\": \"0px 1px 4px #3366FF\"\n                      overflow: \"hidden\"\n                      \"white-space\": \"nowrap\"\n                      \"text-overflow\": \"ellipsis\"\n  events:\n    treemap.click:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-treemap\n#   style=\"width: 100%; height: 800px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-treemap>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = {\n#     name: \"flare\",\n#     children: [\n#       {\n#         name: \"analytics\",\n#         children: [\n#           {\n#             name: \"cluster\",\n#             children: [\n#               {\n#                 name: \"AgglomerativeCluster\",\n#                 value: 3938,\n#               },\n#               {\n#                 name: \"CommunityStructure\",\n#                 value: 3812,\n#               },\n#               {\n#                 name: \"HierarchicalCluster\",\n#                 value: 6714,\n#               },\n#               {\n#                 name: \"MergeEdge\",\n#                 value: 743,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"graph\",\n#             children: [\n#               {\n#                 name: \"BetweennessCentrality\",\n#                 value: 3534,\n#               },\n#               {\n#                 name: \"LinkDistance\",\n#                 value: 5731,\n#               },\n#               {\n#                 name: \"MaxFlowMinCut\",\n#                 value: 7840,\n#               },\n#               {\n#                 name: \"ShortestPaths\",\n#                 value: 5914,\n#               },\n#               {\n#                 name: \"SpanningTree\",\n#                 value: 3416,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"optimization\",\n#             children: [\n#               {\n#                 name: \"AspectRatioBanker\",\n#                 value: 7074,\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#       {\n#         name: \"animate\",\n#         children: [\n#           {\n#             name: \"Easing\",\n#             value: 17010,\n#           },\n#           {\n#             name: \"FunctionSequence\",\n#             value: 5842,\n#           },\n#           {\n#             name: \"interpolate\",\n#             children: [\n#               {\n#                 name: \"ArrayInterpolator\",\n#                 value: 1983,\n#               },\n#               {\n#                 name: \"ColorInterpolator\",\n#                 value: 2047,\n#               },\n#               {\n#                 name: \"DateInterpolator\",\n#                 value: 1375,\n#               },\n#               {\n#                 name: \"Interpolator\",\n#                 value: 8746,\n#               },\n#               {\n#                 name: \"MatrixInterpolator\",\n#                 value: 2202,\n#               },\n#               {\n#                 name: \"NumberInterpolator\",\n#                 value: 1382,\n#               },\n#               {\n#                 name: \"ObjectInterpolator\",\n#                 value: 1629,\n#               },\n#               {\n#                 name: \"PointInterpolator\",\n#                 value: 1675,\n#               },\n#               {\n#                 name: \"RectangleInterpolator\",\n#                 value: 2042,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"ISchedulable\",\n#             value: 1041,\n#           },\n#           {\n#             name: \"Parallel\",\n#             value: 5176,\n#           },\n#           {\n#             name: \"Pause\",\n#             value: 449,\n#           },\n#           {\n#             name: \"Scheduler\",\n#             value: 5593,\n#           },\n#           {\n#             name: \"Sequence\",\n#             value: 5534,\n#           },\n#           {\n#             name: \"Transition\",\n#             value: 9201,\n#           },\n#           {\n#             name: \"Transitioner\",\n#             value: 19975,\n#           },\n#           {\n#             name: \"TransitionEvent\",\n#             value: 1116,\n#           },\n#           {\n#             name: \"Tween\",\n#             value: 6006,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"data\",\n#         children: [\n#           {\n#             name: \"converters\",\n#             children: [\n#               {\n#                 name: \"Converters\",\n#                 value: 721,\n#               },\n#               {\n#                 name: \"DelimitedTextConverter\",\n#                 value: 4294,\n#               },\n#               {\n#                 name: \"GraphMLConverter\",\n#                 value: 9800,\n#               },\n#               {\n#                 name: \"IDataConverter\",\n#                 value: 1314,\n#               },\n#               {\n#                 name: \"JSONConverter\",\n#                 value: 2220,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"DataField\",\n#             value: 1759,\n#           },\n#           {\n#             name: \"DataSchema\",\n#             value: 2165,\n#           },\n#           {\n#             name: \"DataSet\",\n#             value: 586,\n#           },\n#           {\n#             name: \"DataSource\",\n#             value: 3331,\n#           },\n#           {\n#             name: \"DataTable\",\n#             value: 772,\n#           },\n#           {\n#             name: \"DataUtil\",\n#             value: 3322,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"display\",\n#         children: [\n#           {\n#             name: \"DirtySprite\",\n#             value: 8833,\n#           },\n#           {\n#             name: \"LineSprite\",\n#             value: 1732,\n#           },\n#           {\n#             name: \"RectSprite\",\n#             value: 3623,\n#           },\n#           {\n#             name: \"TextSprite\",\n#             value: 10066,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"flex\",\n#         children: [\n#           {\n#             name: \"FlareVis\",\n#             value: 4116,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"physics\",\n#         children: [\n#           {\n#             name: \"DragForce\",\n#             value: 1082,\n#           },\n#           {\n#             name: \"GravityForce\",\n#             value: 1336,\n#           },\n#           {\n#             name: \"IForce\",\n#             value: 319,\n#           },\n#           {\n#             name: \"NBodyForce\",\n#             value: 10498,\n#           },\n#           {\n#             name: \"Particle\",\n#             value: 2822,\n#           },\n#           {\n#             name: \"Simulation\",\n#             value: 9983,\n#           },\n#           {\n#             name: \"Spring\",\n#             value: 2213,\n#           },\n#           {\n#             name: \"SpringForce\",\n#             value: 1681,\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.tooltipUseBrick = {\n#     useBrick: {\n#       brick: \"span\",\n#       properties: {\n#         textContent: \"<% DATA.data?.name %>\",\n#       },\n#     },\n#   };\n#   brick_1.leafUseBrick = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\",\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"8px 6px\",\n#           },\n#         },\n#         slots: {\n#           \"\": {\n#             type: \"bricks\",\n#             bricks: [\n#               {\n#                 brick: \"div\",\n#                 properties: {\n#                   textContent: \"<% DATA.data.name %>\",\n#                   style: {\n#                     \"font-size\": \"20px\",\n#                     \"font-weight\": 500,\n#                     color: \"#FFFFFF\",\n#                     \"line-height\": \"28px\",\n#                     \"text-shadow\": \"0px 1px 4px #3366FF\",\n#                     overflow: \"hidden\",\n#                     \"white-space\": \"nowrap\",\n#                     \"text-overflow\": \"ellipsis\",\n#                   },\n#                 },\n#               },\n#             ],\n#           },\n#         },\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"treemap.click\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Custom Tiling\n\n展示使用不同平铺算法的现代风树图。\n\n```yaml preview\n- brick: data-view.modern-style-treemap\n  properties:\n    tail: treemapBinary\n    leafContainerStyle:\n      border: \"1px solid rgba(74, 234, 255, 0.3)\"\n    data:\n      name: root\n      children:\n        - name: A\n          value: 500\n        - name: B\n          value: 300\n        - name: C\n          value: 200\n        - name: D\n          value: 150\n        - name: E\n          value: 100\n    style:\n      width: 100%\n      height: 400px\n      display: block\n      background-color: \"#1c1e21\"\n    leafUseBrick:\n      useBrick:\n        brick: div\n        properties:\n          textContent: <% DATA.data.name %>\n          style:\n            color: \"#FFFFFF\"\n            padding: \"8px\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-treemap\n#   style=\"width: 100%; height: 400px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-treemap>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.tail = \"treemapBinary\";\n#   brick_1.leafContainerStyle = {\n#     border: \"1px solid rgba(74, 234, 255, 0.3)\",\n#   };\n#   brick_1.data = {\n#     name: \"root\",\n#     children: [\n#       {\n#         name: \"A\",\n#         value: 500,\n#       },\n#       {\n#         name: \"B\",\n#         value: 300,\n#       },\n#       {\n#         name: \"C\",\n#         value: 200,\n#       },\n#       {\n#         name: \"D\",\n#         value: 150,\n#       },\n#       {\n#         name: \"E\",\n#         value: 100,\n#       },\n#     ],\n#   };\n#   brick_1.leafUseBrick = {\n#     useBrick: {\n#       brick: \"div\",\n#       properties: {\n#         textContent: \"<% DATA.data.name %>\",\n#         style: {\n#           color: \"#FFFFFF\",\n#           padding: \"8px\",\n#         },\n#       },\n#     },\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.battery-chart": {
-    "doc": "电池显示构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 30\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"30\"\n#   style=\"background-color: #1c1e21; display: block\"\n# ></data-view.battery-chart>\n# \n```\n\n### ThresholdValue\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 100\n    thresholdValue: 120\n    batteryHeight: 80\n    batteryWidth: 50\n    thresholdColors:\n      - color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\"\n        startValue: 0\n        endValue: 120\n        headerColor: \"#246EFF\"\n      - color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\"\n        startValue: 120\n        endValue: 200\n        headerColor: \"#FF772A\"\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n    left:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"100\"\n#   threshold-value=\"120\"\n#   battery-height=\"80\"\n#   battery-width=\"50\"\n#   style=\"background-color: #1c1e21; display: block\"\n#   id=\"brick-1\"\n# >\n#   <div style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\">\n#     标题\n#   </div>\n#   <div\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\"\n#   >\n#     标题\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n# </data-view.battery-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.thresholdColors = [\n#     {\n#       color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\",\n#       startValue: 0,\n#       endValue: 120,\n#       headerColor: \"#246EFF\",\n#     },\n#     {\n#       color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\",\n#       startValue: 120,\n#       endValue: 200,\n#       headerColor: \"#FF772A\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.battery-chart\ndisplayName: WrappedDataViewBatteryChart\ndescription: 大屏电池\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.battery-chart\n\n> 大屏电池\n\n## Props\n\n| 属性            | 类型               | 必填 | 默认值 | 说明                                                                                                |\n| --------------- | ------------------ | ---- | ------ | --------------------------------------------------------------------------------------------------- |\n| value           | `number`           | 是   | -      | 值，默认范围在 [0-100]，范围还可通过 thresholdColors 来改变，将取第一个和最后一个配置项的值作为区间 |\n| batteryWidth    | `number`           | 是   | -      | 电池的宽度                                                                                          |\n| batteryHeight   | `number`           | 是   | -      | 电池的高度                                                                                          |\n| thresholdColors | `ThresholdColor[]` | 是   | -      | 阈值范围以及颜色的配置                                                                              |\n| thresholdValue  | `number`           | 是   | -      | 阈值刻度线                                                                                          |\n\n## Slots\n\n| 名称        | 说明                                   |\n| ----------- | -------------------------------------- |\n| _(default)_ | 电池右侧内容插槽，可放置标题和数据信息 |\n| left        | 电池左侧阈值线附近内容插槽             |\n\n## Examples\n\n### Basic\n\n基本用法，展示默认配置的电池图表。\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 30\n    batteryWidth: 38\n    batteryHeight: 58\n    thresholdValue: 50\n    thresholdColors:\n      - color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\"\n        startValue: 0\n        endValue: 50\n        headerColor: \"#246EFF\"\n      - color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\"\n        startValue: 50\n        endValue: 100\n        headerColor: \"#FF772A\"\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"30\"\n#   battery-width=\"38\"\n#   battery-height=\"58\"\n#   threshold-value=\"50\"\n#   style=\"background-color: #1c1e21; display: block\"\n#   id=\"brick-1\"\n# ></data-view.battery-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.thresholdColors = [\n#     {\n#       color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\",\n#       startValue: 0,\n#       endValue: 50,\n#       headerColor: \"#246EFF\",\n#     },\n#     {\n#       color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\",\n#       startValue: 50,\n#       endValue: 100,\n#       headerColor: \"#FF772A\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### ThresholdValue\n\n自定义阈值范围、电池尺寸，并通过插槽展示标题和数据信息。\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 100\n    thresholdValue: 120\n    batteryHeight: 80\n    batteryWidth: 50\n    thresholdColors:\n      - color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\"\n        startValue: 0\n        endValue: 120\n        headerColor: \"#246EFF\"\n      - color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\"\n        startValue: 120\n        endValue: 200\n        headerColor: \"#FF772A\"\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n    left:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"100\"\n#   threshold-value=\"120\"\n#   battery-height=\"80\"\n#   battery-width=\"50\"\n#   style=\"background-color: #1c1e21; display: block\"\n#   id=\"brick-1\"\n# >\n#   <div style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\">\n#     标题\n#   </div>\n#   <div\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\"\n#   >\n#     标题\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n# </data-view.battery-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.thresholdColors = [\n#     {\n#       color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\",\n#       startValue: 0,\n#       endValue: 120,\n#       headerColor: \"#246EFF\",\n#     },\n#     {\n#       color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\",\n#       startValue: 120,\n#       endValue: 200,\n#       headerColor: \"#FF772A\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.dropdown-menu": {
-    "doc": "大屏基础下拉菜单\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.dropdown-menu\n  properties:\n    options:\n      - label: 测试1\n        value: test1\n      - label: 测试2\n        value: test2\n    placeholder: 请选择\n    allowClear: true\n  events:\n    value.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.dropdown-menu\n#   placeholder=\"请选择\"\n#   allow-clear\n#   id=\"brick-1\"\n# ></data-view.dropdown-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"测试1\",\n#       value: \"test1\",\n#     },\n#     {\n#       label: \"测试2\",\n#       value: \"test2\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"value.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.dropdown-menu\ndisplayName: WrappedDataViewDropdownMenu\ndescription: 基础下拉菜单\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.dropdown-menu\n\n> 基础下拉菜单\n\n## Props\n\n| 属性        | 类型                                 | 必填 | 默认值 | 说明         |\n| ----------- | ------------------------------------ | ---- | ------ | ------------ |\n| options     | `{ label: string; value: string }[]` | -    | -      | 候选项       |\n| value       | `string`                             | -    | -      | 当前选中值   |\n| placeholder | `string`                             | -    | -      | 占位符       |\n| allowClear  | `boolean`                            | -    | -      | 是否允许清除 |\n\n## Events\n\n| 事件         | detail                  | 说明         |\n| ------------ | ----------------------- | ------------ |\n| value.change | `string` — 当前选中的值 | 值改变时触发 |\n\n## Examples\n\n### Basic\n\n展示下拉菜单的基本用法，包含选项、占位符和清除按钮。\n\n```yaml preview\nbrick: data-view.dropdown-menu\nproperties:\n  options:\n    - label: 测试1\n      value: test1\n    - label: 测试2\n      value: test2\n  placeholder: 请选择\n  allowClear: true\nevents:\n  value.change:\n    - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.dropdown-menu\n#   placeholder=\"请选择\"\n#   allow-clear\n#   id=\"brick-1\"\n# ></data-view.dropdown-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"测试1\",\n#       value: \"test1\",\n#     },\n#     {\n#       label: \"测试2\",\n#       value: \"test2\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"value.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### With Default Value\n\n展示带默认选中值的下拉菜单。\n\n```yaml preview\nbrick: data-view.dropdown-menu\nproperties:\n  options:\n    - label: 选项A\n      value: a\n    - label: 选项B\n      value: b\n    - label: 选项C\n      value: c\n  value: b\n  placeholder: 请选择\n  allowClear: true\nevents:\n  value.change:\n    - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.dropdown-menu\n#   value=\"b\"\n#   placeholder=\"请选择\"\n#   allow-clear\n#   id=\"brick-1\"\n# ></data-view.dropdown-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"选项A\",\n#       value: \"a\",\n#     },\n#     {\n#       label: \"选项B\",\n#       value: \"b\",\n#     },\n#     {\n#       label: \"选项C\",\n#       value: \"c\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"value.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.complex-search": {
-    "doc": "复杂的搜索框\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.complex-search\n  properties:\n    placeholder: Search\n    style:\n      background: \"#1c1e21\"\n      display: block\n      height: 300px\n    options:\n      - name: 主机1\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n      - name: 主机2\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n  events:\n    select:\n      - action: console.log\n    search:\n      - action: console.log\n    focus:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.complex-search\n#   placeholder=\"Search\"\n#   style=\"background: #1c1e21; display: block; height: 300px\"\n#   id=\"brick-1\"\n# ></data-view.complex-search>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       name: \"主机1\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#     {\n#       name: \"主机2\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"focus\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.complex-search\ndisplayName: WrappedDataViewComplexSearch\ndescription: 大屏搜索构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.complex-search\n\n> 大屏搜索构件\n\n## Props\n\n| 属性            | 类型                          | 必填 | 默认值 | 说明             |\n| --------------- | ----------------------------- | ---- | ------ | ---------------- |\n| value           | `string \\| undefined`         | 否   | -      | 初始值           |\n| placeholder     | `string \\| undefined`         | 否   | -      | 占位符           |\n| options         | `OptionItem[]`                | 是   | -      | 下拉选项         |\n| tooltipUseBrick | `ReactUseMultipleBricksProps` | 是   | -      | tooltip useBrick |\n\n## Events\n\n| 事件   | detail                                            | 说明            |\n| ------ | ------------------------------------------------- | --------------- |\n| change | `string` — 当前输入框的文本值                     | input值改变事件 |\n| search | `string` — 当前搜索的文本值                       | input值搜索事件 |\n| select | `OptionItem` — { icon: 图标配置, name: 选项名称 } | 下拉选择事件    |\n| focus  | -                                                 | 聚焦事件        |\n| blur   | -                                                 | 失焦事件        |\n\n## Examples\n\n### Basic\n\n基本用法，展示带下拉选项的搜索框，支持搜索、选择和聚焦事件。\n\n```yaml preview\n- brick: data-view.complex-search\n  properties:\n    placeholder: Search\n    style:\n      background: \"#1c1e21\"\n      display: block\n      height: 300px\n    options:\n      - name: 主机1\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n      - name: 主机2\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n  events:\n    change:\n      - action: console.log\n    select:\n      - action: console.log\n    search:\n      - action: console.log\n    focus:\n      - action: console.log\n    blur:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.complex-search\n#   placeholder=\"Search\"\n#   style=\"background: #1c1e21; display: block; height: 300px\"\n#   id=\"brick-1\"\n# ></data-view.complex-search>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       name: \"主机1\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#     {\n#       name: \"主机2\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"focus\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"blur\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### With Value and TooltipUseBrick\n\n设置初始值，并通过 tooltipUseBrick 自定义下拉项的 tooltip 内容。\n\n```yaml preview\n- brick: data-view.complex-search\n  properties:\n    value: 主机1\n    placeholder: 请输入搜索内容\n    style:\n      background: \"#1c1e21\"\n      display: block\n      height: 300px\n    options:\n      - name: 主机1\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n        description: 这是主机1的描述\n      - name: 主机2\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n        description: 这是主机2的描述\n    tooltipUseBrick:\n      useBrick:\n        - brick: div\n          properties:\n            textContent: <% DATA.description %>\n            style:\n              color: \"#fff\"\n              padding: 8px\n  events:\n    select:\n      - action: console.log\n    search:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.complex-search\n#   value=\"主机1\"\n#   placeholder=\"请输入搜索内容\"\n#   style=\"background: #1c1e21; display: block; height: 300px\"\n#   id=\"brick-1\"\n# ></data-view.complex-search>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       name: \"主机1\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#       description: \"这是主机1的描述\",\n#     },\n#     {\n#       name: \"主机2\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#       description: \"这是主机2的描述\",\n#     },\n#   ];\n#   brick_1.tooltipUseBrick = {\n#     useBrick: [\n#       {\n#         brick: \"div\",\n#         properties: {\n#           textContent: \"<% DATA.description %>\",\n#           style: {\n#             color: \"#fff\",\n#             padding: \"8px\",\n#           },\n#         },\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.loading-panel": {
-    "doc": "data-view.loading-panel\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    loading: false\n    style:\n      height: 300px\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   style=\"height: 300px; display: block\"\n# ></data-view.loading-panel>\n# \n```\n\n### Progress\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    progress: 60\n    useRealTimeProgress: true\n    intervalTime: 300\n    style:\n      height: 300px\n      display: block\n  events:\n    end:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   progress=\"60\"\n#   use-real-time-progress\n#   interval-time=\"300\"\n#   style=\"height: 300px; display: block\"\n#   id=\"brick-1\"\n# ></data-view.loading-panel>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"end\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.loading-panel\ndisplayName: WrappedDataViewLoadingPanel\ndescription: 大屏加载模块展示\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.loading-panel\n\n> 大屏加载模块展示\n\n## Props\n\n| 属性                | 类型      | 必填 | 默认值  | 说明                                       |\n| ------------------- | --------- | ---- | ------- | ------------------------------------------ |\n| customTitle         | `string`  | 否   | -       | 标题                                       |\n| loading             | `boolean` | 否   | -       | 是否加载中，虚拟数据模拟加载过程           |\n| useRealTimeProgress | `boolean` | 否   | `false` | 加载过程是否使用真实数据                   |\n| progress            | `number`  | 否   | -       | 加载进度，区间 [0-100]，使用真实数据时生效 |\n| intervalTime        | `number`  | 否   | `100`   | 每次加载变化的时间间隔，单位 ms            |\n\n## Events\n\n| 事件 | detail | 说明             |\n| ---- | ------ | ---------------- |\n| end  | `void` | loading 结束事件 |\n\n## Examples\n\n### Basic\n\n展示虚拟数据模拟加载过程的基本用法。\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    loading: false\n    style:\n      height: 300px\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   style=\"height: 300px; display: block\"\n# ></data-view.loading-panel>\n# \n```\n\n### Progress\n\n展示使用真实进度数据及加载结束事件监听的用法。\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    progress: 60\n    useRealTimeProgress: true\n    intervalTime: 300\n    style:\n      height: 300px\n      display: block\n  events:\n    end:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   progress=\"60\"\n#   use-real-time-progress\n#   interval-time=\"300\"\n#   style=\"height: 300px; display: block\"\n#   id=\"brick-1\"\n# ></data-view.loading-panel>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"end\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.particle-animation": {
-    "doc": "粒子上升动画\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.particle-animation\n  properties:\n    containerStyle:\n      width: 150px\n      height: 150px\n    colors:\n      startColor: \"#44E6F300\"\n      middleColor: \"#48D9EE\"\n      endColor: \"#E4FFFF\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.particle-animation\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.particle-animation>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.containerStyle = {\n#     width: \"150px\",\n#     height: \"150px\",\n#   };\n#   brick_1.colors = {\n#     startColor: \"#44E6F300\",\n#     middleColor: \"#48D9EE\",\n#     endColor: \"#E4FFFF\",\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.particle-animation\ndisplayName: WrappedDataViewParticleAnimation\ndescription: 大屏粒子加载动效\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.particle-animation\n\n> 大屏粒子加载动效\n\n## Props\n\n| 属性           | 类型                  | 必填 | 默认值 | 说明                                                     |\n| -------------- | --------------------- | ---- | ------ | -------------------------------------------------------- |\n| colors         | `ColorType`           | 是   | -      | 颜色配置，由于光标有三段颜色，中间色段为特效中光点的颜色 |\n| containerStyle | `React.CSSProperties` | 否   | -      | 容器样式                                                 |\n\n## Slots\n\n| 名称      | 说明                       |\n| --------- | -------------------------- |\n| (default) | 粒子动效容器内的自定义内容 |\n\n## Examples\n\n### Basic\n\n展示大屏粒子上升动效的基本用法，包含颜色和容器样式配置。\n\n```yaml preview\n- brick: data-view.particle-animation\n  properties:\n    containerStyle:\n      width: 150px\n      height: 150px\n    colors:\n      startColor: \"#44E6F300\"\n      middleColor: \"#48D9EE\"\n      endColor: \"#E4FFFF\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.particle-animation\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.particle-animation>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.containerStyle = {\n#     width: \"150px\",\n#     height: \"150px\",\n#   };\n#   brick_1.colors = {\n#     startColor: \"#44E6F300\",\n#     middleColor: \"#48D9EE\",\n#     endColor: \"#E4FFFF\",\n#   };\n# </script>\n# \n```\n\n### Custom Colors\n\n展示自定义不同颜色主题的粒子动效。\n\n```yaml preview\n- brick: data-view.particle-animation\n  properties:\n    containerStyle:\n      width: 200px\n      height: 200px\n    colors:\n      startColor: \"#FF6B6B00\"\n      middleColor: \"#FF6B6B\"\n      endColor: \"#FFE0E0\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.particle-animation\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.particle-animation>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.containerStyle = {\n#     width: \"200px\",\n#     height: \"200px\",\n#   };\n#   brick_1.colors = {\n#     startColor: \"#FF6B6B00\",\n#     middleColor: \"#FF6B6B\",\n#     endColor: \"#FFE0E0\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.app-wall-card-item": {
-    "doc": "应用墙小卡片\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.app-wall-card-item\n  properties:\n    cardTitle: pos\n    description: 店铺货管通\n    style:\n      width: 100px\n      height: 120px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-card-item\n#   card-title=\"pos\"\n#   description=\"店铺货管通\"\n#   style=\"width: 100px; height: 120px\"\n# ></data-view.app-wall-card-item>\n# \n```\n\n### Status\n\n```yaml preview\n- brick: data-view.app-wall-card-item\n  properties:\n    status: warning\n    cardTitle: pos\n    description: 店铺货管通\n    style:\n      width: 100px\n      height: 120px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-card-item\n#   status=\"warning\"\n#   card-title=\"pos\"\n#   description=\"店铺货管通\"\n#   style=\"width: 100px; height: 120px\"\n# ></data-view.app-wall-card-item>\n# \n```\n"
+    "doc": "---\ntagName: data-view.app-wall-card-item\ndisplayName: WrappedDataViewAppWallCardItem\ndescription: 应用墙子构件----卡片项\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.app-wall-card-item\n\n> 应用墙子构件----卡片项\n\n## Props\n\n| 属性        | 类型                    | 必填 | 默认值     | 说明 |\n| ----------- | ----------------------- | ---- | ---------- | ---- |\n| status      | `\"normal\" \\| \"warning\"` | 否   | `\"normal\"` | 状态 |\n| cardTitle   | `string`                | 是   | -          | 标题 |\n| description | `string`                | 是   | -          | 描述 |\n\n## Examples\n\n### Basic\n\n展示应用墙卡片项的基本用法。\n\n```yaml preview\n- brick: data-view.app-wall-card-item\n  properties:\n    cardTitle: pos\n    description: 店铺货管通\n    style:\n      width: 100px\n      height: 120px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-card-item\n#   card-title=\"pos\"\n#   description=\"店铺货管通\"\n#   style=\"width: 100px; height: 120px\"\n# ></data-view.app-wall-card-item>\n# \n```\n\n### Status\n\n展示不同状态下的应用墙卡片项。\n\n```yaml preview\n- brick: data-view.app-wall-card-item\n  properties:\n    status: warning\n    cardTitle: pos\n    description: 店铺货管通\n    style:\n      width: 100px\n      height: 120px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-card-item\n#   status=\"warning\"\n#   card-title=\"pos\"\n#   description=\"店铺货管通\"\n#   style=\"width: 100px; height: 120px\"\n# ></data-view.app-wall-card-item>\n# \n```\n"
   },
   "data-view.app-wall-system-card": {
-    "doc": "系统卡片\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.app-wall-system-card\n  properties:\n    cardTitle: A系统\n    itemList:\n      - key: 实例ID\n        value: xxxx\n      - key: 系统英文缩写\n        value: system-fms\n      - key: 实例ID\n        value: xxx\n      - key: 系统英文名称\n        value: app-fms\n      - key: 系统中文名称\n        value: A财务系统\n      - key: 归属部门\n        value: 财务系统部\n      - key: 系统类型\n        value: 应用系统\n      - key: 系统描述\n        value: 1、使用场景概述：财务应收和应付结算\n    buttonName: 应用墙大屏\n    style:\n      background: rgba(40, 46, 58, 100%)\n      box-shadow: \"0 0 12px 2px rgba(80, 255, 255, 0.45), inset 0 0 22px 0 #20242A\"\n      border: \"2px solid #50FFFF\"\n      overflow: hidden\n      height: 400px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-system-card\n#   card-title=\"A系统\"\n#   button-name=\"应用墙大屏\"\n#   style=\"\n#     background: rgba(40, 46, 58, 100%);\n#     box-shadow:\n#       0 0 12px 2px rgba(80, 255, 255, 0.45),\n#       inset 0 0 22px 0 #20242a;\n#     border: 2px solid #50ffff;\n#     overflow: hidden;\n#     height: 400px;\n#   \"\n#   id=\"brick-1\"\n# ></data-view.app-wall-system-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.itemList = [\n#     {\n#       key: \"实例ID\",\n#       value: \"xxxx\",\n#     },\n#     {\n#       key: \"系统英文缩写\",\n#       value: \"system-fms\",\n#     },\n#     {\n#       key: \"实例ID\",\n#       value: \"xxx\",\n#     },\n#     {\n#       key: \"系统英文名称\",\n#       value: \"app-fms\",\n#     },\n#     {\n#       key: \"系统中文名称\",\n#       value: \"A财务系统\",\n#     },\n#     {\n#       key: \"归属部门\",\n#       value: \"财务系统部\",\n#     },\n#     {\n#       key: \"系统类型\",\n#       value: \"应用系统\",\n#     },\n#     {\n#       key: \"系统描述\",\n#       value: \"1、使用场景概述：财务应收和应付结算\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Status\n\n```yaml preview\n- brick: data-view.app-wall-system-card\n  properties:\n    cardTitle: B系统\n    itemList:\n      - key: 实例ID\n        value: xxxx\n      - key: 系统英文缩写\n        value: system-fms-B\n      - key: 系统描述\n        value: 1、使用场景概述：财务应收和应付结算\n    buttonName: 应用墙大屏\n    status: warning\n    style:\n      background: \"linear-gradient(180deg, #CC0066 0%, rgba(204, 0, 102, 0.2) 100%),#0F1117FF\"\n      box-shadow: \"0 0 12px 2px rgba(204, 0, 102, 0.4), inset 0 4px 10px 0 rgba(255, 255, 255, 0.65)\"\n      overflow: hidden\n      height: 400px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-system-card\n#   card-title=\"B系统\"\n#   button-name=\"应用墙大屏\"\n#   style=\"\n#     background:\n#       linear-gradient(180deg, #cc0066 0%, rgba(204, 0, 102, 0.2) 100%),\n#       #0f1117ff;\n#     box-shadow:\n#       0 0 12px 2px rgba(204, 0, 102, 0.4),\n#       inset 0 4px 10px 0 rgba(255, 255, 255, 0.65);\n#     overflow: hidden;\n#     height: 400px;\n#   \"\n#   id=\"brick-1\"\n# ></data-view.app-wall-system-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.itemList = [\n#     {\n#       key: \"实例ID\",\n#       value: \"xxxx\",\n#     },\n#     {\n#       key: \"系统英文缩写\",\n#       value: \"system-fms-B\",\n#     },\n#     {\n#       key: \"系统描述\",\n#       value: \"1、使用场景概述：财务应收和应付结算\",\n#     },\n#   ];\n#   brick_1.status = \"warning\";\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.app-wall-system-card\ndisplayName: WrappedDataViewAppWallSystemCard\ndescription: 应用墙系统卡片\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.app-wall-system-card\n\n> 应用墙系统卡片\n\n## Props\n\n| 属性           | 类型                  | 必填 | 默认值     | 说明         |\n| -------------- | --------------------- | ---- | ---------- | ------------ |\n| status         | `StatusType`          | 否   | `\"normal\"` | 卡片状态     |\n| cardTitle      | `string`              | 否   | -          | 卡片标题     |\n| itemList       | `DescriptionItem[]`   | 否   | -          | 卡片信息数据 |\n| buttonName     | `string`              | 否   | -          | 按钮名称     |\n| containerStyle | `React.CSSProperties` | 否   | -          | 外层容器样式 |\n\n## Events\n\n| 事件         | detail | 说明         |\n| ------------ | ------ | ------------ |\n| button-click | `void` | 按钮点击事件 |\n\n## Examples\n\n### Basic\n\n展示应用墙系统卡片的基本用法，包含标题、信息列表和按钮。\n\n```yaml preview\n- brick: data-view.app-wall-system-card\n  properties:\n    cardTitle: A系统\n    itemList:\n      - key: 实例ID\n        value: xxxx\n      - key: 系统英文缩写\n        value: system-fms\n      - key: 实例ID\n        value: xxx\n      - key: 系统英文名称\n        value: app-fms\n      - key: 系统中文名称\n        value: A财务系统\n      - key: 归属部门\n        value: 财务系统部\n      - key: 系统类型\n        value: 应用系统\n      - key: 系统描述\n        value: 1、使用场景概述：财务应收和应付结算\n    buttonName: 应用墙大屏\n    style:\n      background: \"rgba(40, 46, 58, 100%)\"\n      box-shadow: \"0 0 12px 2px rgba(80, 255, 255, 0.45), inset 0 0 22px 0 #20242A\"\n      border: \"2px solid #50FFFF\"\n      overflow: hidden\n      height: 400px\n  events:\n    button-click:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-system-card\n#   card-title=\"A系统\"\n#   button-name=\"应用墙大屏\"\n#   style=\"\n#     background: rgba(40, 46, 58, 100%);\n#     box-shadow:\n#       0 0 12px 2px rgba(80, 255, 255, 0.45),\n#       inset 0 0 22px 0 #20242a;\n#     border: 2px solid #50ffff;\n#     overflow: hidden;\n#     height: 400px;\n#   \"\n#   id=\"brick-1\"\n# ></data-view.app-wall-system-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.itemList = [\n#     {\n#       key: \"实例ID\",\n#       value: \"xxxx\",\n#     },\n#     {\n#       key: \"系统英文缩写\",\n#       value: \"system-fms\",\n#     },\n#     {\n#       key: \"实例ID\",\n#       value: \"xxx\",\n#     },\n#     {\n#       key: \"系统英文名称\",\n#       value: \"app-fms\",\n#     },\n#     {\n#       key: \"系统中文名称\",\n#       value: \"A财务系统\",\n#     },\n#     {\n#       key: \"归属部门\",\n#       value: \"财务系统部\",\n#     },\n#     {\n#       key: \"系统类型\",\n#       value: \"应用系统\",\n#     },\n#     {\n#       key: \"系统描述\",\n#       value: \"1、使用场景概述：财务应收和应付结算\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"button-click\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Status\n\n展示 warning 状态下的系统卡片样式。\n\n```yaml preview\n- brick: data-view.app-wall-system-card\n  properties:\n    cardTitle: B系统\n    itemList:\n      - key: 实例ID\n        value: xxxx\n      - key: 系统英文缩写\n        value: system-fms-B\n      - key: 系统描述\n        value: 1、使用场景概述：财务应收和应付结算\n    buttonName: 应用墙大屏\n    status: warning\n    style:\n      background: \"linear-gradient(180deg, #CC0066 0%, rgba(204, 0, 102, 0.2) 100%),#0F1117FF\"\n      box-shadow: \"0 0 12px 2px rgba(204, 0, 102, 0.4), inset 0 4px 10px 0 rgba(255, 255, 255, 0.65)\"\n      overflow: hidden\n      height: 400px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-system-card\n#   card-title=\"B系统\"\n#   button-name=\"应用墙大屏\"\n#   style=\"\n#     background:\n#       linear-gradient(180deg, #cc0066 0%, rgba(204, 0, 102, 0.2) 100%),\n#       #0f1117ff;\n#     box-shadow:\n#       0 0 12px 2px rgba(204, 0, 102, 0.4),\n#       inset 0 4px 10px 0 rgba(255, 255, 255, 0.65);\n#     overflow: hidden;\n#     height: 400px;\n#   \"\n#   id=\"brick-1\"\n# ></data-view.app-wall-system-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.itemList = [\n#     {\n#       key: \"实例ID\",\n#       value: \"xxxx\",\n#     },\n#     {\n#       key: \"系统英文缩写\",\n#       value: \"system-fms-B\",\n#     },\n#     {\n#       key: \"系统描述\",\n#       value: \"1、使用场景概述：财务应收和应付结算\",\n#     },\n#   ];\n#   brick_1.status = \"warning\";\n# </script>\n# \n```\n"
   },
   "data-view.app-wall-relation-line": {
-    "doc": "应用墙流光线条\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.app-wall-relation-line\n  properties:\n    lightColor: purple\n    style:\n      height: 200px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-relation-line\n#   light-color=\"purple\"\n#   style=\"height: 200px\"\n# ></data-view.app-wall-relation-line>\n# \n```\n"
+    "doc": "---\ntagName: data-view.app-wall-relation-line\ndisplayName: WrappedDataViewAppWallRelationLine\ndescription: 应用墙子构件----关联连线\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.app-wall-relation-line\n\n> 应用墙子构件----关联连线\n\n## Props\n\n| 属性       | 类型                 | 必填 | 默认值   | 说明     |\n| ---------- | -------------------- | ---- | -------- | -------- |\n| lightColor | `\"blue\" \\| \"purple\"` | 否   | `\"blue\"` | 光线颜色 |\n\n## Examples\n\n### Basic\n\n展示应用墙关联连线的基本用法及颜色效果。\n\n```yaml preview\n- brick: data-view.app-wall-relation-line\n  properties:\n    lightColor: purple\n    style:\n      height: 200px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall-relation-line\n#   light-color=\"purple\"\n#   style=\"height: 200px\"\n# ></data-view.app-wall-relation-line>\n# \n```\n"
   },
   "data-view.cabinet-button": {
-    "doc": "data-view.cabinet-button\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-button\n  properties:\n    buttonStyle:\n      width: 50px\n      height: 50px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-button id=\"brick-1\"></data-view.cabinet-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.buttonStyle = {\n#     width: \"50px\",\n#     height: \"50px\",\n#     background: \"#1c1e21\",\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-button\ndisplayName: WrappedDataViewCabinetButton\ndescription: 大屏按钮\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-button\n\n> 大屏按钮\n\n## Props\n\n| 属性        | 类型                  | 必填 | 默认值 | 说明       |\n| ----------- | --------------------- | ---- | ------ | ---------- |\n| buttonStyle | `React.CSSProperties` | 否   | -      | 按钮的样式 |\n\n## Examples\n\n### Basic\n\n展示一个带自定义样式的大屏关闭按钮。\n\n```yaml preview\n- brick: data-view.cabinet-button\n  properties:\n    buttonStyle:\n      width: 50px\n      height: 50px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-button id=\"brick-1\"></data-view.cabinet-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.buttonStyle = {\n#     width: \"50px\",\n#     height: \"50px\",\n#     background: \"#1c1e21\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.cabinet-node": {
-    "doc": "data-view.cabinet-node\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-node\n  properties:\n    type: container-group\n    nodeTitle: 容器组\n    style:\n      width: 100px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-node\n#   type=\"container-group\"\n#   node-title=\"容器组\"\n#   style=\"width: 100px; background: #1c1e21\"\n# ></data-view.cabinet-node>\n# \n```\n\n### IsAlert\n\n```yaml preview\n- brick: data-view.cabinet-node\n  properties:\n    type: container-group\n    nodeTitle: 容器组\n    isAlert: true\n    style:\n      width: 100px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-node\n#   type=\"container-group\"\n#   node-title=\"容器组\"\n#   is-alert\n#   style=\"width: 100px; background: #1c1e21\"\n# ></data-view.cabinet-node>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-node\ndisplayName: WrappedDataViewCabinetNode\ndescription: cabinet子构件----节点\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-node\n\n> cabinet子构件----节点\n\n## Props\n\n| 属性      | 类型                                                                    | 必填 | 默认值 | 说明         |\n| --------- | ----------------------------------------------------------------------- | ---- | ------ | ------------ |\n| type      | `\"container-group\" \\| \"physical-machine\" \\| \"virtual-machine\" \\| \"pod\"` | 是   | -      | 类型         |\n| nodeTitle | `string`                                                                | 是   | -      | 标题         |\n| status    | `\"active\" \\| \"faded\"`                                                   | 否   | -      | 当前状态     |\n| isAlert   | `boolean`                                                               | 否   | -      | 是否是告警态 |\n\n## Examples\n\n### Basic\n\n展示容器组类型的节点。\n\n```yaml preview\n- brick: data-view.cabinet-node\n  properties:\n    type: container-group\n    nodeTitle: 容器组\n    style:\n      width: 100px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-node\n#   type=\"container-group\"\n#   node-title=\"容器组\"\n#   style=\"width: 100px; background: #1c1e21\"\n# ></data-view.cabinet-node>\n# \n```\n\n### IsAlert\n\n展示处于告警态的节点（图标变为告警样式）。\n\n```yaml preview\n- brick: data-view.cabinet-node\n  properties:\n    type: container-group\n    nodeTitle: 容器组\n    isAlert: true\n    style:\n      width: 100px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-node\n#   type=\"container-group\"\n#   node-title=\"容器组\"\n#   is-alert\n#   style=\"width: 100px; background: #1c1e21\"\n# ></data-view.cabinet-node>\n# \n```\n\n### Status\n\n展示不同状态（高亮或淡化）下的节点。\n\n```yaml preview\n- brick: data-view.cabinet-node\n  properties:\n    type: virtual-machine\n    nodeTitle: 虚拟机\n    status: faded\n    style:\n      width: 100px\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-node\n#   type=\"virtual-machine\"\n#   node-title=\"虚拟机\"\n#   status=\"faded\"\n#   style=\"width: 100px; background: #1c1e21\"\n# ></data-view.cabinet-node>\n# \n```\n"
   },
   "data-view.cabinet-app-layer": {
-    "doc": "data-view.cabinet-app-layer\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-app-layer\n  properties:\n    appTitle: inventory-api\n    style:\n      width: 600px\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-app-layer\n#   app-title=\"inventory-api\"\n#   style=\"width: 600px; background-color: #1c1e21\"\n# ></data-view.cabinet-app-layer>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-app-layer\ndisplayName: WrappedDataViewCabinetAppLayer\ndescription: cabinet子构件----应用层\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-app-layer\n\n> cabinet子构件----应用层\n\n## Props\n\n| 属性     | 类型                  | 必填 | 默认值 | 说明     |\n| -------- | --------------------- | ---- | ------ | -------- |\n| appTitle | `string`              | 是   | -      | 标题     |\n| status   | `\"active\" \\| \"faded\"` | 否   | -      | 当前状态 |\n\n## Examples\n\n### Basic\n\n展示 cabinet 应用层子构件的基本用法。\n\n```yaml preview\n- brick: data-view.cabinet-app-layer\n  properties:\n    appTitle: inventory-api\n    style:\n      width: 600px\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-app-layer\n#   app-title=\"inventory-api\"\n#   style=\"width: 600px; background-color: #1c1e21\"\n# ></data-view.cabinet-app-layer>\n# \n```\n\n### Status\n\n展示不同状态下的 cabinet 应用层。\n\n```yaml preview\n- brick: div\n  properties:\n    textContent: active 状态\n- brick: data-view.cabinet-app-layer\n  properties:\n    appTitle: inventory-api\n    status: active\n    style:\n      width: 600px\n      background-color: \"#1c1e21\"\n- brick: div\n  properties:\n    textContent: faded 状态\n    style:\n      margin-top: 20px\n- brick: data-view.cabinet-app-layer\n  properties:\n    appTitle: inventory-api\n    status: faded\n    style:\n      width: 600px\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div>active 状态</div>\n# <data-view.cabinet-app-layer\n#   app-title=\"inventory-api\"\n#   status=\"active\"\n#   style=\"width: 600px; background-color: #1c1e21\"\n# ></data-view.cabinet-app-layer>\n# <div style=\"margin-top: 20px\">faded 状态</div>\n# <data-view.cabinet-app-layer\n#   app-title=\"inventory-api\"\n#   status=\"faded\"\n#   style=\"width: 600px; background-color: #1c1e21\"\n# ></data-view.cabinet-app-layer>\n# \n```\n"
   },
   "data-view.cabinet-container": {
-    "doc": "data-view.cabinet-container\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-container\n  properties:\n    customTitle: 集群容器\n    data:\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n    style:\n      width: 400px\n      height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-container\n#   custom-title=\"集群容器\"\n#   style=\"width: 400px; height: 500px\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = [\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Status\n\n```yaml preview\n- brick: data-view.cabinet-container\n  properties:\n    customTitle: 集群容器\n    status: active\n    data:\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n    style:\n      width: 400px\n      height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-container\n#   custom-title=\"集群容器\"\n#   status=\"active\"\n#   style=\"width: 400px; height: 500px\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = [\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-container\ndisplayName: WrappedDataViewCabinetContainer\ndescription: 大屏集群容器构件\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-container\n\n> 大屏集群容器构件\n\n## Props\n\n| 属性        | 类型                  | 必填 | 默认值   | 说明                                                  |\n| ----------- | --------------------- | ---- | -------- | ----------------------------------------------------- |\n| type        | `ContainerType`       | 是   | `\"host\"` | 容器类型，host、k8s（主题橙色）、k8s-blue（蓝色主题） |\n| data        | `CabinetNodeProps[]`  | 是   | `[]`     | 数据                                                  |\n| status      | `\"active\" \\| \"faded\"` | 否   | -        | 当前状态,是否高亮或者淡化                             |\n| customTitle | `string \\| undefined` | 否   | -        | 容器标题                                              |\n\n## Events\n\n| 事件              | detail                                                                                                                       | 说明                       |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| container.click   | `ClickEventDataType` — { type: 点击对象类型（\"node\" 或 \"container\"）, data: 被点击节点的数据（点击容器本身时为 undefined） } | 节点或者container 点击事件 |\n| container.dbclick | `ClickEventDataType` — { type: 点击对象类型（\"node\" 或 \"container\"）, data: 被双击节点的数据（双击容器本身时为 undefined） } | 节点或者container 双击事件 |\n\n## Examples\n\n### Basic\n\n展示一个基本的大屏集群容器，包含若干物理机节点。\n\n```yaml preview\n- brick: data-view.cabinet-container\n  properties:\n    customTitle: 集群容器\n    data:\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n    style:\n      width: 400px\n      height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-container\n#   custom-title=\"集群容器\"\n#   style=\"width: 400px; height: 500px\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = [\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Status\n\n展示高亮状态下的集群容器。\n\n```yaml preview\n- brick: data-view.cabinet-container\n  properties:\n    customTitle: 集群容器\n    status: active\n    data:\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n      - type: physical-machine\n        nodeTitle: \"255.255.255\"\n    style:\n      width: 400px\n      height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-container\n#   custom-title=\"集群容器\"\n#   status=\"active\"\n#   style=\"width: 400px; height: 500px\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = [\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#     {\n#       type: \"physical-machine\",\n#       nodeTitle: \"255.255.255\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Click events\n\n演示节点和容器的点击与双击事件处理。\n\n```yaml preview\n- brick: data-view.cabinet-container\n  properties:\n    type: k8s\n    customTitle: K8S集群\n    data:\n      - type: container-group\n        nodeTitle: \"容器组A\"\n      - type: pod\n        nodeTitle: \"Pod-1\"\n    style:\n      width: 400px\n      height: 500px\n  events:\n    container.click:\n      - action: console.log\n    container.dbclick:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-container\n#   custom-title=\"K8S集群\"\n#   style=\"width: 400px; height: 500px\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"k8s\";\n#   brick_1.data = [\n#     {\n#       type: \"container-group\",\n#       nodeTitle: \"容器组A\",\n#     },\n#     {\n#       type: \"pod\",\n#       nodeTitle: \"Pod-1\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"container.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"container.dbclick\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.cabinet-thumbnail": {
-    "doc": "data-view.cabinet-thumbnail 部署架构拓扑缩略图\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-thumbnail\n  properties:\n    appName: inventory-api\n    clusters:\n      - title: inventory-api##aaaaa\n        type: host\n        data:\n          - nodeTitle: 244.244.244.244\n            key: 244.244.244.244\n            type: physical-machine\n          - nodeTitle: 244.244.244.245\n            key: 244.244.244.245\n            type: virtual-machine\n          - nodeTitle: 244.244.245.245\n            key: 244.244.245.245\n            type: physical-machine\n          - nodeTitle: 244.244.245.244\n            key: 244.244.245.244\n            type: virtual-machine\n      - title: K8S集群xxx\n        key: k8s-cluster\n        type: k8s\n        data:\n          - nodeTitle: a容器组\n            key: aa\n            type: container-group\n          - nodeTitle: b容器组\n            key: bb\n            type: container-group\n      - title: K8S集群xx\n        key: xxxx\n        type: k8s-blue\n        data:\n          - nodeTitle: a1容器组\n            key: aaa\n            type: pod\n          - nodeTitle: b1容器组\n            key: bbb\n            type: pod\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-thumbnail\n#   app-name=\"inventory-api\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-thumbnail>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.clusters = [\n#     {\n#       title: \"inventory-api##aaaaa\",\n#       type: \"host\",\n#       data: [\n#         {\n#           nodeTitle: \"244.244.244.244\",\n#           key: \"244.244.244.244\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.244.245\",\n#           key: \"244.244.244.245\",\n#           type: \"virtual-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.245.245\",\n#           key: \"244.244.245.245\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.245.244\",\n#           key: \"244.244.245.244\",\n#           type: \"virtual-machine\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"K8S集群xxx\",\n#       key: \"k8s-cluster\",\n#       type: \"k8s\",\n#       data: [\n#         {\n#           nodeTitle: \"a容器组\",\n#           key: \"aa\",\n#           type: \"container-group\",\n#         },\n#         {\n#           nodeTitle: \"b容器组\",\n#           key: \"bb\",\n#           type: \"container-group\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"K8S集群xx\",\n#       key: \"xxxx\",\n#       type: \"k8s-blue\",\n#       data: [\n#         {\n#           nodeTitle: \"a1容器组\",\n#           key: \"aaa\",\n#           type: \"pod\",\n#         },\n#         {\n#           nodeTitle: \"b1容器组\",\n#           key: \"bbb\",\n#           type: \"pod\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-thumbnail\ndisplayName: WrappedDataViewCabinetThumbnail\ndescription: 应用墙缩略图\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-thumbnail\n\n> 应用墙缩略图\n\n## Props\n\n| 属性     | 类型         | 必填 | 默认值 | 说明         |\n| -------- | ------------ | ---- | ------ | ------------ |\n| clusters | `Clusters[]` | 是   | `[]`   | 集群数据     |\n| columns  | `number`     | 是   | `4`    | 单个容器列数 |\n| appName  | `string`     | 是   | -      | 应用名称     |\n\n## Examples\n\n### Basic\n\n展示应用墙缩略图，包含多个不同类型的集群容器。\n\n```yaml preview\n- brick: data-view.cabinet-thumbnail\n  properties:\n    appName: inventory-api\n    clusters:\n      - title: inventory-api##aaaaa\n        type: host\n        data:\n          - nodeTitle: 244.244.244.244\n            key: 244.244.244.244\n            type: physical-machine\n          - nodeTitle: 244.244.244.245\n            key: 244.244.244.245\n            type: virtual-machine\n          - nodeTitle: 244.244.245.245\n            key: 244.244.245.245\n            type: physical-machine\n          - nodeTitle: 244.244.245.244\n            key: 244.244.245.244\n            type: virtual-machine\n      - title: K8S集群xxx\n        key: k8s-cluster\n        type: k8s\n        data:\n          - nodeTitle: a容器组\n            key: aa\n            type: container-group\n          - nodeTitle: b容器组\n            key: bb\n            type: container-group\n      - title: K8S集群xx\n        key: xxxx\n        type: k8s-blue\n        data:\n          - nodeTitle: a1容器组\n            key: aaa\n            type: pod\n          - nodeTitle: b1容器组\n            key: bbb\n            type: pod\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-thumbnail\n#   app-name=\"inventory-api\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-thumbnail>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.clusters = [\n#     {\n#       title: \"inventory-api##aaaaa\",\n#       type: \"host\",\n#       data: [\n#         {\n#           nodeTitle: \"244.244.244.244\",\n#           key: \"244.244.244.244\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.244.245\",\n#           key: \"244.244.244.245\",\n#           type: \"virtual-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.245.245\",\n#           key: \"244.244.245.245\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"244.244.245.244\",\n#           key: \"244.244.245.244\",\n#           type: \"virtual-machine\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"K8S集群xxx\",\n#       key: \"k8s-cluster\",\n#       type: \"k8s\",\n#       data: [\n#         {\n#           nodeTitle: \"a容器组\",\n#           key: \"aa\",\n#           type: \"container-group\",\n#         },\n#         {\n#           nodeTitle: \"b容器组\",\n#           key: \"bb\",\n#           type: \"container-group\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"K8S集群xx\",\n#       key: \"xxxx\",\n#       type: \"k8s-blue\",\n#       data: [\n#         {\n#           nodeTitle: \"a1容器组\",\n#           key: \"aaa\",\n#           type: \"pod\",\n#         },\n#         {\n#           nodeTitle: \"b1容器组\",\n#           key: \"bbb\",\n#           type: \"pod\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Custom columns\n\n通过 columns 属性控制单个容器的节点列数。\n\n```yaml preview\n- brick: data-view.cabinet-thumbnail\n  properties:\n    appName: my-app\n    columns: 2\n    clusters:\n      - title: 主机集群\n        type: host\n        data:\n          - nodeTitle: 10.0.0.1\n            type: physical-machine\n          - nodeTitle: 10.0.0.2\n            type: virtual-machine\n          - nodeTitle: 10.0.0.3\n            type: physical-machine\n          - nodeTitle: 10.0.0.4\n            type: virtual-machine\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-thumbnail\n#   app-name=\"my-app\"\n#   columns=\"2\"\n#   id=\"brick-1\"\n# ></data-view.cabinet-thumbnail>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.clusters = [\n#     {\n#       title: \"主机集群\",\n#       type: \"host\",\n#       data: [\n#         {\n#           nodeTitle: \"10.0.0.1\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"10.0.0.2\",\n#           type: \"virtual-machine\",\n#         },\n#         {\n#           nodeTitle: \"10.0.0.3\",\n#           type: \"physical-machine\",\n#         },\n#         {\n#           nodeTitle: \"10.0.0.4\",\n#           type: \"virtual-machine\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.cabinet-graph": {
-    "doc": "data-view.cabinet-graph 部署架构拓扑\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.cabinet-graph\n  properties:\n    dataSource:\n      appName: inventory-api\n      key: inventory-api\n      clusters:\n        - clusterName: inventory-api##aaaaa\n          key: inventory-api##aaaaa\n          type: host\n          nodes:\n            - nodeTitle: 244.244.244.244\n              key: 244.244.244.244\n              type: physical-machine\n              isAlert: true\n            - nodeTitle: 244.244.244.245\n              key: 244.244.244.245\n              type: virtual-machine\n              isAlert: true\n            - nodeTitle: 244.244.245.245\n              key: 244.244.245.245\n              type: physical-machine\n            - nodeTitle: 244.244.245.244\n              key: 244.244.245.244\n              type: virtual-machine\n        - clusterName: K8S集群xxx\n          key: k8s-cluster\n          type: k8s\n          nodes:\n            - nodeTitle: a容器组\n              key: aa\n              type: container-group\n              isAlert: true\n            - nodeTitle: b容器组\n              key: bb\n              type: container-group\n        - clusterName: K8S集群xx\n          key: xxxx\n          type: k8s-blue\n          nodes:\n            - nodeTitle: a容器组\n              key: aa\n              type: pod\n              isAlert: true\n            - nodeTitle: b容器组\n              key: bb\n              type: pod\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-graph id=\"brick-1\"></data-view.cabinet-graph>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = {\n#     appName: \"inventory-api\",\n#     key: \"inventory-api\",\n#     clusters: [\n#       {\n#         clusterName: \"inventory-api##aaaaa\",\n#         key: \"inventory-api##aaaaa\",\n#         type: \"host\",\n#         nodes: [\n#           {\n#             nodeTitle: \"244.244.244.244\",\n#             key: \"244.244.244.244\",\n#             type: \"physical-machine\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"244.244.244.245\",\n#             key: \"244.244.244.245\",\n#             type: \"virtual-machine\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"244.244.245.245\",\n#             key: \"244.244.245.245\",\n#             type: \"physical-machine\",\n#           },\n#           {\n#             nodeTitle: \"244.244.245.244\",\n#             key: \"244.244.245.244\",\n#             type: \"virtual-machine\",\n#           },\n#         ],\n#       },\n#       {\n#         clusterName: \"K8S集群xxx\",\n#         key: \"k8s-cluster\",\n#         type: \"k8s\",\n#         nodes: [\n#           {\n#             nodeTitle: \"a容器组\",\n#             key: \"aa\",\n#             type: \"container-group\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"b容器组\",\n#             key: \"bb\",\n#             type: \"container-group\",\n#           },\n#         ],\n#       },\n#       {\n#         clusterName: \"K8S集群xx\",\n#         key: \"xxxx\",\n#         type: \"k8s-blue\",\n#         nodes: [\n#           {\n#             nodeTitle: \"a容器组\",\n#             key: \"aa\",\n#             type: \"pod\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"b容器组\",\n#             key: \"bb\",\n#             type: \"pod\",\n#           },\n#         ],\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.cabinet-graph\ndisplayName: WrappedDataViewCabinetGraph\ndescription: cabinet 部署架构拓扑\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.cabinet-graph\n\n> cabinet 部署架构拓扑\n\n## Props\n\n| 属性           | 类型                 | 必填 | 默认值 | 说明                 |\n| -------------- | -------------------- | ---- | ------ | -------------------- |\n| dataSource     | `AppData`            | 是   | -      | 数据源               |\n| activeKey      | `string \\| string[]` | 否   | -      | 选中项，支持数组     |\n| hiddenCloseBtn | `boolean`            | 否   | -      | 取消按钮是否需要展示 |\n\n## Events\n\n| 事件               | detail                                                                                                                 | 说明                                   |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |\n| close.button.click | `void`                                                                                                                 | 关闭按钮点击事件                       |\n| cabinet.click      | `{ type: ChangeType, data: Record<string, any> }` — { type: 点击类型（node/cluster/layer），data: 对应节点或集群数据 } | 节点或外层的点击事件                   |\n| cabinet.dbclick    | `{ type: ChangeType, data: Record<string, any> }` — { type: 双击类型（node/cluster），data: 对应节点或集群数据 }       | 节点或外层的双击事件，目前不支持应用层 |\n\n## Examples\n\n### Basic\n\n展示 cabinet 部署架构拓扑构件的基本用法，包含物理机、虚拟机和容器组节点。\n\n```yaml preview\n- brick: data-view.cabinet-graph\n  properties:\n    dataSource:\n      appName: inventory-api\n      key: inventory-api\n      clusters:\n        - clusterName: inventory-api##aaaaa\n          key: inventory-api##aaaaa\n          type: host\n          nodes:\n            - nodeTitle: 244.244.244.244\n              key: 244.244.244.244\n              type: physical-machine\n              isAlert: true\n            - nodeTitle: 244.244.244.245\n              key: 244.244.244.245\n              type: virtual-machine\n              isAlert: true\n            - nodeTitle: 244.244.245.245\n              key: 244.244.245.245\n              type: physical-machine\n            - nodeTitle: 244.244.245.244\n              key: 244.244.245.244\n              type: virtual-machine\n        - clusterName: K8S集群xxx\n          key: k8s-cluster\n          type: k8s\n          nodes:\n            - nodeTitle: a容器组\n              key: aa\n              type: container-group\n              isAlert: true\n            - nodeTitle: b容器组\n              key: bb\n              type: container-group\n        - clusterName: K8S集群xx\n          key: xxxx\n          type: k8s-blue\n          nodes:\n            - nodeTitle: a容器组\n              key: aa\n              type: pod\n              isAlert: true\n            - nodeTitle: b容器组\n              key: bb\n              type: pod\n  events:\n    cabinet.click:\n      action: console.log\n    cabinet.dbclick:\n      action: console.log\n    close.button.click:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-graph id=\"brick-1\"></data-view.cabinet-graph>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = {\n#     appName: \"inventory-api\",\n#     key: \"inventory-api\",\n#     clusters: [\n#       {\n#         clusterName: \"inventory-api##aaaaa\",\n#         key: \"inventory-api##aaaaa\",\n#         type: \"host\",\n#         nodes: [\n#           {\n#             nodeTitle: \"244.244.244.244\",\n#             key: \"244.244.244.244\",\n#             type: \"physical-machine\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"244.244.244.245\",\n#             key: \"244.244.244.245\",\n#             type: \"virtual-machine\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"244.244.245.245\",\n#             key: \"244.244.245.245\",\n#             type: \"physical-machine\",\n#           },\n#           {\n#             nodeTitle: \"244.244.245.244\",\n#             key: \"244.244.245.244\",\n#             type: \"virtual-machine\",\n#           },\n#         ],\n#       },\n#       {\n#         clusterName: \"K8S集群xxx\",\n#         key: \"k8s-cluster\",\n#         type: \"k8s\",\n#         nodes: [\n#           {\n#             nodeTitle: \"a容器组\",\n#             key: \"aa\",\n#             type: \"container-group\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"b容器组\",\n#             key: \"bb\",\n#             type: \"container-group\",\n#           },\n#         ],\n#       },\n#       {\n#         clusterName: \"K8S集群xx\",\n#         key: \"xxxx\",\n#         type: \"k8s-blue\",\n#         nodes: [\n#           {\n#             nodeTitle: \"a容器组\",\n#             key: \"aa\",\n#             type: \"pod\",\n#             isAlert: true,\n#           },\n#           {\n#             nodeTitle: \"b容器组\",\n#             key: \"bb\",\n#             type: \"pod\",\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"cabinet.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"cabinet.dbclick\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"close.button.click\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### 隐藏关闭按钮\n\n展示隐藏关闭按钮的部署架构拓扑。\n\n```yaml preview\n- brick: data-view.cabinet-graph\n  properties:\n    hiddenCloseBtn: true\n    activeKey: k8s-cluster\n    dataSource:\n      appName: my-app\n      key: my-app\n      clusters:\n        - clusterName: K8S集群\n          key: k8s-cluster\n          type: k8s\n          nodes:\n            - nodeTitle: web容器组\n              key: web-pod\n              type: container-group\n            - nodeTitle: api容器组\n              key: api-pod\n              type: container-group\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.cabinet-graph\n#   hidden-close-btn\n#   id=\"brick-1\"\n# ></data-view.cabinet-graph>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeKey = \"k8s-cluster\";\n#   brick_1.dataSource = {\n#     appName: \"my-app\",\n#     key: \"my-app\",\n#     clusters: [\n#       {\n#         clusterName: \"K8S集群\",\n#         key: \"k8s-cluster\",\n#         type: \"k8s\",\n#         nodes: [\n#           {\n#             nodeTitle: \"web容器组\",\n#             key: \"web-pod\",\n#             type: \"container-group\",\n#           },\n#           {\n#             nodeTitle: \"api容器组\",\n#             key: \"api-pod\",\n#             type: \"container-group\",\n#           },\n#         ],\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.app-wall": {
-    "doc": "应用墙\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.app-wall\n  properties:\n    style:\n      width: 1000px\n      height: 600px\n      background-color: \"#1c1e21\"\n    relations:\n      - source: 5e63e70340f6f\n        target: 5e63e70340f76\n      - source: 5e63e70340f73\n        target: 5e63e70340f6f\n      - source: 5e63e70340f73\n        target: 5e63e70340f81\n    dataSource:\n      - key: 5e63e70340f6f\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: diss\n          description: 数字孪生门店\n        systemCardProps:\n          status: normal\n          cardTitle: 数字孪生门店\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f51\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f35\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f36\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: thirdPay\n          description: 支付中心\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f37\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: crm\n          description: 零售CRM\n        systemCardProps:\n          status: normal\n          cardTitle: 零售CRM\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f38\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: diss\n          description: 数字孪生门店2\n        systemCardProps:\n          status: warning\n          cardTitle: 数字孪生门店2\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f39\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统2\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统2\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f40\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通2\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通2\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f41\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通21\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通21\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f42\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通22\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通22\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f43\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通23\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通23\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f44\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通24\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通24\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f45\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: pss\n          description: 店达人\n        systemCardProps:\n          status: normal\n          cardTitle: 店达人\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f46\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: pos\n          description: 店铺收银系统\n        systemCardProps:\n          status: normal\n          cardTitle: 店铺收银系统\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f47\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: mpos\n          description: 店铺货管通\n        systemCardProps:\n          status: normal\n          cardTitle: 店铺货管通\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f48\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: mps\n          description: 营促销\n        systemCardProps:\n          status: normal\n          cardTitle: 营促销\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f49\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: lmg\n          description: 丽码购系统\n        systemCardProps:\n          status: normal\n          cardTitle: 丽码购系统\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f50\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: diss\n          description: 数字孪生门店3\n        systemCardProps:\n          status: normal\n          cardTitle: 数字孪生门店3\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70350f51\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统3\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统3\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f52\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通3\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通3\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f53\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通31\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通31\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f54\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: nmp\n          description: 云店通32\n        systemCardProps:\n          status: warning\n          cardTitle: 云店通32\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f55\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通33\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通33\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f56\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通34\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通34\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f57\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通4\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通4\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f58\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通41\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通41\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f59\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: nmp\n          description: 云店通42\n        systemCardProps:\n          status: warning\n          cardTitle: 云店通42\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f60\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通43\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通43\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f61\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通44\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通44\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f62\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通45\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通45\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f63\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通46\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通46\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f64\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: nmp\n          description: 云店通47\n        systemCardProps:\n          status: warning\n          cardTitle: 云店通47\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f65\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通48\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通48\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f66\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通49\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通49\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f67\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: thirdPay\n          description: 支付中心5\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心5\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f68\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: crm\n          description: 零售CRM51\n        systemCardProps:\n          status: normal\n          cardTitle: 零售CRM51\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f69\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: diss\n          description: 数字孪生门店53\n        systemCardProps:\n          status: warning\n          cardTitle: 数字孪生门店53\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f70\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统54\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统54\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f71\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通55\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通55\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f72\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: thirdPay\n          description: 支付中心56\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心56\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f73\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: crm\n          description: 零售CRM57\n        systemCardProps:\n          status: normal\n          cardTitle: 零售CRM57\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f74\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: diss\n          description: 数字孪生门店58\n        systemCardProps:\n          status: normal\n          cardTitle: 数字孪生门店58\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f75\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统59\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统59\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f76\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: nmp\n          description: 云店通6\n        systemCardProps:\n          status: normal\n          cardTitle: 云店通6\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f77\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: thirdPay\n          description: 支付中心61\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心61\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f78\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: crm\n          description: 零售CRM62\n        systemCardProps:\n          status: normal\n          cardTitle: 零售CRM62\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f79\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: diss\n          description: 数字孪生门店63\n        systemCardProps:\n          status: warning\n          cardTitle: 数字孪生门店63\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f80\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统64\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统64\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f81\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: thirdPay\n          description: 支付中心65\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心65\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f82\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: crm\n          description: 零售CRM66\n        systemCardProps:\n          status: normal\n          cardTitle: 零售CRM66\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f83\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: diss\n          description: 数字孪生门店67\n        systemCardProps:\n          status: warning\n          cardTitle: 数字孪生门店67\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f84\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统68\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统68\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文缩写\n              value: system-fms\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n            - key: 归属部门\n              value: 财务系统部\n            - key: 系统类型\n              value: 应用系统\n            - key: 系统描述\n              value: 1、使用场景概述：财务应收和应付结算\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall\n#   style=\"width: 1000px; height: 600px; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.app-wall>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.relations = [\n#     {\n#       source: \"5e63e70340f6f\",\n#       target: \"5e63e70340f76\",\n#     },\n#     {\n#       source: \"5e63e70340f73\",\n#       target: \"5e63e70340f6f\",\n#     },\n#     {\n#       source: \"5e63e70340f73\",\n#       target: \"5e63e70340f81\",\n#     },\n#   ];\n#   brick_1.dataSource = [\n#     {\n#       key: \"5e63e70340f6f\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"数字孪生门店\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f51\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f35\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f36\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"thirdPay\",\n#         description: \"支付中心\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f37\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"零售CRM\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f38\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店2\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"数字孪生门店2\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f39\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统2\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统2\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f40\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通2\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通2\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f41\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通21\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通21\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f42\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通22\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通22\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f43\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通23\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通23\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f44\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通24\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通24\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f45\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"pss\",\n#         description: \"店达人\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"店达人\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f46\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"pos\",\n#         description: \"店铺收银系统\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"店铺收银系统\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f47\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"mpos\",\n#         description: \"店铺货管通\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"店铺货管通\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f48\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"mps\",\n#         description: \"营促销\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"营促销\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f49\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"lmg\",\n#         description: \"丽码购系统\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"丽码购系统\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f50\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店3\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"数字孪生门店3\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70350f51\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统3\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统3\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f52\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通3\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通3\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f53\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通31\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通31\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f54\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通32\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"云店通32\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f55\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通33\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通33\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f56\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通34\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通34\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f57\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通4\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通4\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f58\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通41\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通41\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f59\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通42\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"云店通42\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f60\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通43\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通43\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f61\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通44\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通44\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f62\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通45\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通45\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f63\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通46\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通46\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f64\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通47\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"云店通47\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f65\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通48\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通48\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f66\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通49\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通49\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f67\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"thirdPay\",\n#         description: \"支付中心5\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心5\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f68\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM51\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"零售CRM51\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f69\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店53\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"数字孪生门店53\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f70\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统54\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统54\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f71\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通55\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通55\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f72\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"thirdPay\",\n#         description: \"支付中心56\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心56\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f73\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM57\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"零售CRM57\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f74\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店58\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"数字孪生门店58\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f75\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统59\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统59\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f76\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"nmp\",\n#         description: \"云店通6\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"云店通6\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f77\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"thirdPay\",\n#         description: \"支付中心61\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心61\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f78\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM62\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"零售CRM62\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f79\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店63\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"数字孪生门店63\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f80\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统64\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统64\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f81\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"thirdPay\",\n#         description: \"支付中心65\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心65\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f82\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM66\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"零售CRM66\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f83\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店67\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"数字孪生门店67\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f84\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统68\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统68\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文缩写\",\n#             value: \"system-fms\",\n#           },\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#           {\n#             key: \"归属部门\",\n#             value: \"财务系统部\",\n#           },\n#           {\n#             key: \"系统类型\",\n#             value: \"应用系统\",\n#           },\n#           {\n#             key: \"系统描述\",\n#             value: \"1、使用场景概述：财务应收和应付结算\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.app-wall\ndisplayName: WrappedDataViewAppWall\ndescription: 应用墙\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.app-wall\n\n> 应用墙\n\n## Props\n\n| 属性                      | 类型                       | 必填 | 默认值                                                                                        | 说明                                                                                    |\n| ------------------------- | -------------------------- | ---- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\n| dataSource                | `AppData[]`                | 是   | -                                                                                             | 数据                                                                                    |\n| relations                 | `Relation[]`               | 是   | -                                                                                             | 关系                                                                                    |\n| cardSize                  | `CardSize`                 | 否   | `{ width: 120, height: 160, outerWidth: 140, outerHeight: 180, lgWidth: 180, lgHeight: 240 }` | 卡的大小配置，注意这里卡片大小宽高将影响T台大小展示                                     |\n| cardBrickName             | `AppWallCardBrickNameType` | 否   | `\"data-view.app-wall-card-item\"`                                                              | 卡片支持的构件类型                                                                      |\n| useDblclick               | `boolean`                  | 否   | -                                                                                             | 是否使用双击事件，开启之后卡片不会触发内部dblclick事件展示梯台                          |\n| useDistanceConfig         | `boolean`                  | 否   | -                                                                                             | 是否使用内置的distanceConfig配置                                                        |\n| disabledDefaultClickEvent | `boolean`                  | 否   | -                                                                                             | 是否禁用触发默认单击事件，开启之后卡片不会触发内部click事件展示卡片，直接抛出了点击事件 |\n| containerId               | `string`                   | 否   | -                                                                                             | 容器id，用于监听容器大小                                                                |\n| noRotate                  | `boolean`                  | 否   | -                                                                                             | 控制是否旋转                                                                            |\n| boundMargin               | `number`                   | 否   | `100`                                                                                         | 四周的边距                                                                              |\n| useSystemPopover          | `boolean`                  | 否   | -                                                                                             | 是否使用系统卡片popover                                                                 |\n\n## Events\n\n| 事件                     | detail                                         | 说明                                                                   |\n| ------------------------ | ---------------------------------------------- | ---------------------------------------------------------------------- |\n| system.card.button.click | `AppData` — 当前点击的应用数据                 | 系统卡片详情按钮点击事件                                               |\n| left.btn.click           | `AppData` — 展示台左边按钮点击时传出的应用数据 | 展示台左边按钮点击事件                                                 |\n| right.btn.click          | `AppData` — 展示台右边按钮点击时传出的应用数据 | 展示台右边按钮点击事件                                                 |\n| on.card.dbclick          | `AppData` — 双击卡片时传出的应用数据           | 卡片双击事件，useDblclick 为 true 或当前节点 clusters 属性无数据时触发 |\n| card.click               | `AppData` — 单击卡片时传出的应用数据           | 卡片单击事件，disabledDefaultClickEvent 为 true 时点击卡片触发         |\n\n## Examples\n\n### Basic\n\n展示包含多个应用节点和关系连线的三维应用墙。\n\n```yaml preview\n- brick: data-view.app-wall\n  properties:\n    style:\n      width: 1000px\n      height: 600px\n      background-color: \"#1c1e21\"\n    relations:\n      - source: 5e63e70340f6f\n        target: 5e63e70340f76\n      - source: 5e63e70340f73\n        target: 5e63e70340f6f\n      - source: 5e63e70340f73\n        target: 5e63e70340f81\n    dataSource:\n      - key: 5e63e70340f6f\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: diss\n          description: 数字孪生门店\n        systemCardProps:\n          status: normal\n          cardTitle: 数字孪生门店\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef6\n            - key: 系统英文名称\n              value: app-fms\n            - key: 系统中文名称\n              value: A财务系统\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f51\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: img\n          description: 购物系统\n        systemCardProps:\n          status: normal\n          cardTitle: 购物系统\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef7\n            - key: 系统英文名称\n              value: app-shop\n            - key: 系统中文名称\n              value: 购物系统\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f73\n        status: warning\n        cardItemProps:\n          status: warning\n          cardTitle: crm\n          description: 零售CRM\n        systemCardProps:\n          status: warning\n          cardTitle: 零售CRM\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef8\n            - key: 系统英文名称\n              value: app-crm\n            - key: 系统中文名称\n              value: 零售CRM\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f76\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: pos\n          description: 店铺收银系统\n        systemCardProps:\n          status: normal\n          cardTitle: 店铺收银系统\n          itemList:\n            - key: 实例ID\n              value: 5d570a851bef9\n            - key: 系统英文名称\n              value: app-pos\n            - key: 系统中文名称\n              value: 店铺收银系统\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n      - key: 5e63e70340f81\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: pay\n          description: 支付中心\n        systemCardProps:\n          status: normal\n          cardTitle: 支付中心\n          itemList:\n            - key: 实例ID\n              value: 5d570a851befa\n            - key: 系统英文名称\n              value: app-pay\n            - key: 系统中文名称\n              value: 支付中心\n          buttonName: 应用墙大屏\n        trapezoidalProps:\n          leftBtnName: 应用健康监控大屏\n          rightBtnName: 应用部署架构\n    boundMargin: 80\n    noRotate: false\n    useSystemPopover: true\n  events:\n    system.card.button.click:\n      action: console.log\n    left.btn.click:\n      action: console.log\n    right.btn.click:\n      action: console.log\n    card.click:\n      action: console.log\n    on.card.dbclick:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall\n#   style=\"width: 1000px; height: 600px; background-color: #1c1e21\"\n#   bound-margin=\"80\"\n#   id=\"brick-1\"\n# ></data-view.app-wall>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.relations = [\n#     {\n#       source: \"5e63e70340f6f\",\n#       target: \"5e63e70340f76\",\n#     },\n#     {\n#       source: \"5e63e70340f73\",\n#       target: \"5e63e70340f6f\",\n#     },\n#     {\n#       source: \"5e63e70340f73\",\n#       target: \"5e63e70340f81\",\n#     },\n#   ];\n#   brick_1.dataSource = [\n#     {\n#       key: \"5e63e70340f6f\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"diss\",\n#         description: \"数字孪生门店\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"数字孪生门店\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef6\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-fms\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"A财务系统\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f51\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"img\",\n#         description: \"购物系统\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"购物系统\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef7\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-shop\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"购物系统\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f73\",\n#       status: \"warning\",\n#       cardItemProps: {\n#         status: \"warning\",\n#         cardTitle: \"crm\",\n#         description: \"零售CRM\",\n#       },\n#       systemCardProps: {\n#         status: \"warning\",\n#         cardTitle: \"零售CRM\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef8\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-crm\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"零售CRM\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f76\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"pos\",\n#         description: \"店铺收银系统\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"店铺收银系统\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851bef9\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-pos\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"店铺收银系统\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#     {\n#       key: \"5e63e70340f81\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"pay\",\n#         description: \"支付中心\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"支付中心\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"5d570a851befa\",\n#           },\n#           {\n#             key: \"系统英文名称\",\n#             value: \"app-pay\",\n#           },\n#           {\n#             key: \"系统中文名称\",\n#             value: \"支付中心\",\n#           },\n#         ],\n#         buttonName: \"应用墙大屏\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"应用健康监控大屏\",\n#         rightBtnName: \"应用部署架构\",\n#       },\n#     },\n#   ];\n#   brick_1.useSystemPopover = true;\n#   brick_1.addEventListener(\"system.card.button.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"left.btn.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"right.btn.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"card.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"on.card.dbclick\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### 禁用默认点击行为\n\n设置 disabledDefaultClickEvent 为 true，点击卡片时直接抛出 card.click 事件，不展示内部卡片详情。\n\n```yaml preview\n- brick: data-view.app-wall\n  properties:\n    style:\n      width: 1000px\n      height: 600px\n      background-color: \"#1c1e21\"\n    disabledDefaultClickEvent: true\n    useDblclick: true\n    useDistanceConfig: true\n    dataSource:\n      - key: node-1\n        status: normal\n        cardItemProps:\n          status: normal\n          cardTitle: app-a\n          description: 应用A\n        systemCardProps:\n          status: normal\n          cardTitle: 应用A\n          itemList:\n            - key: 实例ID\n              value: inst-001\n          buttonName: 详情\n        trapezoidalProps:\n          leftBtnName: 健康监控\n          rightBtnName: 部署架构\n      - key: node-2\n        status: error\n        cardItemProps:\n          status: error\n          cardTitle: app-b\n          description: 应用B\n        systemCardProps:\n          status: error\n          cardTitle: 应用B\n          itemList:\n            - key: 实例ID\n              value: inst-002\n          buttonName: 详情\n        trapezoidalProps:\n          leftBtnName: 健康监控\n          rightBtnName: 部署架构\n    relations:\n      - source: node-1\n        target: node-2\n  events:\n    card.click:\n      action: console.log\n    on.card.dbclick:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.app-wall\n#   style=\"width: 1000px; height: 600px; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.app-wall>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.disabledDefaultClickEvent = true;\n#   brick_1.useDblclick = true;\n#   brick_1.useDistanceConfig = true;\n#   brick_1.dataSource = [\n#     {\n#       key: \"node-1\",\n#       status: \"normal\",\n#       cardItemProps: {\n#         status: \"normal\",\n#         cardTitle: \"app-a\",\n#         description: \"应用A\",\n#       },\n#       systemCardProps: {\n#         status: \"normal\",\n#         cardTitle: \"应用A\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"inst-001\",\n#           },\n#         ],\n#         buttonName: \"详情\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"健康监控\",\n#         rightBtnName: \"部署架构\",\n#       },\n#     },\n#     {\n#       key: \"node-2\",\n#       status: \"error\",\n#       cardItemProps: {\n#         status: \"error\",\n#         cardTitle: \"app-b\",\n#         description: \"应用B\",\n#       },\n#       systemCardProps: {\n#         status: \"error\",\n#         cardTitle: \"应用B\",\n#         itemList: [\n#           {\n#             key: \"实例ID\",\n#             value: \"inst-002\",\n#           },\n#         ],\n#         buttonName: \"详情\",\n#       },\n#       trapezoidalProps: {\n#         leftBtnName: \"健康监控\",\n#         rightBtnName: \"部署架构\",\n#       },\n#     },\n#   ];\n#   brick_1.relations = [\n#     {\n#       source: \"node-1\",\n#       target: \"node-2\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"card.click\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"on.card.dbclick\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.graph-text": {
-    "doc": "data-view.graph-text\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.graph-text\n  properties:\n    text: 负载均衡数\n    value: 234\n    style:\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-text text=\"负载均衡数\" value=\"234\"></data-view.graph-text>\n# \n```\n"
+    "doc": "---\ntagName: data-view.graph-text\ndisplayName: WrappedDataViewGraphText\ndescription: Graph text\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.graph-text\n\n> Graph text\n\n## Props\n\n| 属性  | 类型               | 必填 | 默认值 | 说明     |\n| ----- | ------------------ | ---- | ------ | -------- |\n| text  | `string`           | 是   | -      | 文本标题 |\n| value | `string \\| number` | 是   | -      | 文本值   |\n\n## Examples\n\n### Basic\n\n展示 graph 文本节点的基本用法，包含标题和数值。\n\n```yaml preview\nbrick: data-view.graph-text\nproperties:\n  text: 负载均衡数\n  value: 234\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-text text=\"负载均衡数\" value=\"234\"></data-view.graph-text>\n# \n```\n"
   },
   "data-view.graph-node": {
-    "doc": "data-view.graph-node\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.graph-node\n  properties:\n    url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    style:\n      width: 140px\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-node\n#   url=\"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\"\n#   style=\"width: 140px; display: block\"\n# ></data-view.graph-node>\n# \n```\n"
+    "doc": "---\ntagName: data-view.graph-node\ndisplayName: WrappedDataViewGraphNode\ndescription: Graph Node\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.graph-node\n\n> Graph Node\n\n## Props\n\n| 属性 | 类型     | 必填 | 默认值 | 说明         |\n| ---- | -------- | ---- | ------ | ------------ |\n| url  | `string` | 是   | -      | 节点图片路径 |\n\n## Examples\n\n### Basic\n\n展示 graph 节点的基本用法，通过 url 指定节点图片。\n\n```yaml preview\nbrick: data-view.graph-node\nproperties:\n  url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n  style:\n    width: 140px\n    display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-node\n#   url=\"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\"\n#   style=\"width: 140px; display: block\"\n# ></data-view.graph-node>\n# \n```\n"
   },
   "data-view.graph-layout-grid": {
-    "doc": "有规律的网格布局的拓扑\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.graph-layout-grid\n  properties:\n    columns: 7\n    rows: 3\n    style:\n      width: 960px\n      height: 600px\n      display: block\n      background-color: \"#1c1e21\"\n    dataSource:\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 应用\n        value: 7348\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 存储卷数\n        value: 638\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 应用\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 守护进程数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 容器组数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 无状态服务数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-layout-grid\n#   columns=\"7\"\n#   rows=\"3\"\n#   style=\"width: 960px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.graph-layout-grid>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 7348,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"存储卷数\",\n#       value: 638,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"守护进程数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"容器组数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"无状态服务数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### IsReverse\n\n```yaml preview\n- brick: data-view.graph-layout-grid\n  properties:\n    columns: 7\n    rows: 3\n    isReverse: true\n    style:\n      width: 960px\n      height: 600px\n      display: block\n      background-color: \"#1c1e21\"\n    dataSource:\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 应用\n        value: 7348\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 存储卷数\n        value: 638\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 应用\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 守护进程数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 容器组数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 无状态服务数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n      - text: 负载均衡数\n        value: 200\n        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-layout-grid\n#   columns=\"7\"\n#   rows=\"3\"\n#   is-reverse\n#   style=\"width: 960px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.graph-layout-grid>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 7348,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"存储卷数\",\n#       value: 638,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"守护进程数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"容器组数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"无状态服务数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.graph-layout-grid\ndisplayName: WrappedDataViewGraphLayoutGrid\ndescription: Graph grid 布局\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.graph-layout-grid\n\n> Graph grid 布局\n\n## Props\n\n| 属性       | 类型               | 必填 | 默认值 | 说明                                                                                           |\n| ---------- | ------------------ | ---- | ------ | ---------------------------------------------------------------------------------------------- |\n| columns    | `number`           | 是   | -      | 布局的列数                                                                                     |\n| rows       | `number`           | 是   | -      | 布局的行数                                                                                     |\n| dataSource | `DataSourceType[]` | -    | -      | 数据源，每项包含 text、value 和 url 字段                                                       |\n| isReverse  | `boolean`          | -    | -      | 布局是否反转。默认奇数行位置13579…，偶数行位置02468…；反转后偶数行位置13579…，奇数行位置02468… |\n\n## Examples\n\n### Basic\n\n展示 graph grid 布局的基本用法，按网格规律排列图文节点。\n\n```yaml preview\nbrick: data-view.graph-layout-grid\nproperties:\n  columns: 7\n  rows: 3\n  style:\n    width: 960px\n    height: 600px\n    display: block\n    background-color: \"#1c1e21\"\n  dataSource:\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 应用\n      value: 7348\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 存储卷数\n      value: 638\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 应用\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 守护进程数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 容器组数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 无状态服务数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-layout-grid\n#   columns=\"7\"\n#   rows=\"3\"\n#   style=\"width: 960px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.graph-layout-grid>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 7348,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"存储卷数\",\n#       value: 638,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"守护进程数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"容器组数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"无状态服务数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### IsReverse\n\n开启 isReverse 后，节点排布方式按偶数行优先排列。\n\n```yaml preview\nbrick: data-view.graph-layout-grid\nproperties:\n  columns: 7\n  rows: 3\n  isReverse: true\n  style:\n    width: 960px\n    height: 600px\n    display: block\n    background-color: \"#1c1e21\"\n  dataSource:\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 应用\n      value: 7348\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 存储卷数\n      value: 638\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 应用\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 守护进程数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 容器组数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 无状态服务数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n    - text: 负载均衡数\n      value: 200\n      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.graph-layout-grid\n#   columns=\"7\"\n#   rows=\"3\"\n#   is-reverse\n#   style=\"width: 960px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.graph-layout-grid>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 7348,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"存储卷数\",\n#       value: 638,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"应用\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"守护进程数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"容器组数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"无状态服务数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#     {\n#       text: \"负载均衡数\",\n#       value: 200,\n#       url: \"https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.grid-background": {
-    "doc": "网格背景\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.grid-background\n  properties:\n    style:\n      width: 920px\n      height: 600px\n      display: block\n      background-color: \"#1c1e21\"\n    color: \"#235F90\"\n    particleColor:\n      startColor: \"#477AFFFF\"\n      endColor: \"#5F83FF00\"\n    maskStyle:\n      background: \"rgba(41, 109, 255, 0.8)\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.grid-background\n#   style=\"width: 920px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.grid-background>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.color = \"#235F90\";\n#   brick_1.particleColor = {\n#     startColor: \"#477AFFFF\",\n#     endColor: \"#5F83FF00\",\n#   };\n#   brick_1.maskStyle = {\n#     background: \"rgba(41, 109, 255, 0.8)\",\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.grid-background\ndisplayName: WrappedDataViewGridBackground\ndescription: 大屏网格背景\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.grid-background\n\n> 大屏网格背景\n\n## Props\n\n| 属性          | 类型                           | 必填 | 默认值                                               | 说明                 |\n| ------------- | ------------------------------ | ---- | ---------------------------------------------------- | -------------------- |\n| color         | `React.CSSProperties[\"color\"]` | 否   | `\"#235F90\"`                                          | 背景条纹颜色         |\n| maskStyle     | `React.CSSProperties`          | 否   | -                                                    | 背景蓝色遮罩区域样式 |\n| particleColor | `ParticleColor`                | 否   | `{ startColor: \"#477AFFFF\", endColor: \"#5F83FF00\" }` | 运动粒子的颜色       |\n\n## Examples\n\n### Basic\n\n展示大屏网格背景的基本用法，包含条纹颜色、粒子颜色和遮罩样式配置。\n\n```yaml preview\n- brick: data-view.grid-background\n  properties:\n    style:\n      width: 920px\n      height: 600px\n      display: block\n      background-color: \"#1c1e21\"\n    color: \"#235F90\"\n    particleColor:\n      startColor: \"#477AFFFF\"\n      endColor: \"#5F83FF00\"\n    maskStyle:\n      background: \"rgba(41, 109, 255, 0.8)\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.grid-background\n#   style=\"width: 920px; height: 600px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.grid-background>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.color = \"#235F90\";\n#   brick_1.particleColor = {\n#     startColor: \"#477AFFFF\",\n#     endColor: \"#5F83FF00\",\n#   };\n#   brick_1.maskStyle = {\n#     background: \"rgba(41, 109, 255, 0.8)\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.gear-background": {
-    "doc": "齿轮背景\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.gear-background\n  properties:\n    style:\n      width: 300px\n      height: 300px\n      display: block\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gear-background\n#   style=\"width: 300px; height: 300px; display: block; background: #1c1e21\"\n# ></data-view.gear-background>\n# \n```\n"
+    "doc": "---\ntagName: data-view.gear-background\ndisplayName: WrappedDataViewGearBackground\ndescription: 齿轮背景\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.gear-background\n\n> 齿轮背景\n\n## Props\n\n| 属性  | 类型                           | 必填 | 默认值      | 说明         |\n| ----- | ------------------------------ | ---- | ----------- | ------------ |\n| color | `React.CSSProperties[\"color\"]` | -    | `\"#3366FF\"` | 背景条纹颜色 |\n\n## Examples\n\n### Basic\n\n展示齿轮背景的基本用法，通过设置容器尺寸控制显示区域。\n\n```yaml preview\nbrick: data-view.gear-background\nproperties:\n  style:\n    width: 300px\n    height: 300px\n    display: block\n    background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gear-background\n#   style=\"width: 300px; height: 300px; display: block; background: #1c1e21\"\n# ></data-view.gear-background>\n# \n```\n\n### Custom Color\n\n自定义齿轮背景的条纹颜色。\n\n```yaml preview\nbrick: data-view.gear-background\nproperties:\n  color: \"#00eaff\"\n  style:\n    width: 400px\n    height: 400px\n    display: block\n    background: \"#0a0e1a\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gear-background\n#   style=\"width: 400px; height: 400px; display: block; background: #0a0e1a\"\n#   id=\"brick-1\"\n# ></data-view.gear-background>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.color = \"#00eaff\";\n# </script>\n# \n```\n"
   },
   "data-view.radar-chart": {
-    "doc": "雷达图构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.radar-chart\n  properties:\n    dataSource:\n      - name: JavaScript\n        maxValue: 100\n        value: 60\n        percentValue: 45.8%\n      - name: Java\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: CSS\n        maxValue: 100\n        value: 70\n        percentValue: 45.8%\n      - name: Python\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: Three.js\n        maxValue: 100\n        value: 50\n        percentValue: 45.8%\n    value: 85.9\n    dataCircle:\n      fillStyle: red\n      r: 3\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.radar-chart\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.radar-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       name: \"JavaScript\",\n#       maxValue: 100,\n#       value: 60,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Java\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"CSS\",\n#       maxValue: 100,\n#       value: 70,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Python\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Three.js\",\n#       maxValue: 100,\n#       value: 50,\n#       percentValue: \"45.8%\",\n#     },\n#   ];\n#   brick_1.value = 85.9;\n#   brick_1.dataCircle = {\n#     fillStyle: \"red\",\n#     r: 3,\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.radar-chart\ndisplayName: WrappedDataViewRadarChart\ndescription: 雷达图\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.radar-chart\n\n> 雷达图\n\n## Props\n\n| 属性       | 类型               | 必填 | 默认值 | 说明                                           |\n| ---------- | ------------------ | ---- | ------ | ---------------------------------------------- |\n| dataSource | `Data[]`           | 是   | -      | 数据                                           |\n| width      | `number`           | 是   | -      | 容器宽度                                       |\n| height     | `number`           | 是   | -      | 容器高度                                       |\n| radius     | `number`           | 是   | -      | 多边形半径                                     |\n| scale      | `number`           | 是   | `0.25` | 取值[0-1]，默认半径的缩放比例,radius不传时生效 |\n| value      | `number \\| string` | 是   | -      | 中心评分                                       |\n| dataFill   | `DataFill`         | 是   | -      | 数据多边形填充样式                             |\n| dataCircle | `DataCircle`       | 是   | -      | 数据点圆圈的样式配置                           |\n| dataLine   | `DataLine`         | 是   | -      | 数据线条的样式配置                             |\n\n## Examples\n\n### Basic\n\n展示基础雷达图，配置数据源和中心评分。\n\n```yaml preview\nbrick: data-view.radar-chart\nproperties:\n  dataSource:\n    - name: JavaScript\n      maxValue: 100\n      value: 60\n      percentValue: 45.8%\n    - name: Java\n      maxValue: 100\n      value: 30\n      percentValue: 45.8%\n    - name: CSS\n      maxValue: 100\n      value: 70\n      percentValue: 45.8%\n    - name: Python\n      maxValue: 100\n      value: 30\n      percentValue: 45.8%\n    - name: Three.js\n      maxValue: 100\n      value: 50\n      percentValue: 45.8%\n  value: 85.9\n  dataCircle:\n    fillStyle: red\n    r: 3\n  style:\n    display: block\n    background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.radar-chart\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.radar-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       name: \"JavaScript\",\n#       maxValue: 100,\n#       value: 60,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Java\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"CSS\",\n#       maxValue: 100,\n#       value: 70,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Python\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Three.js\",\n#       maxValue: 100,\n#       value: 50,\n#       percentValue: \"45.8%\",\n#     },\n#   ];\n#   brick_1.value = 85.9;\n#   brick_1.dataCircle = {\n#     fillStyle: \"red\",\n#     r: 3,\n#   };\n# </script>\n# \n```\n\n### Custom Styles\n\n展示自定义数据多边形填充色、线条和圆圈样式的雷达图。\n\n```yaml preview\nbrick: data-view.radar-chart\nproperties:\n  dataSource:\n    - name: 性能\n      maxValue: 100\n      value: 80\n    - name: 可用性\n      maxValue: 100\n      value: 65\n    - name: 安全性\n      maxValue: 100\n      value: 90\n    - name: 扩展性\n      maxValue: 100\n      value: 55\n    - name: 维护性\n      maxValue: 100\n      value: 70\n  value: 72\n  width: 400\n  height: 400\n  dataFill:\n    fillStyle: \"rgba(0, 200, 255, 0.3)\"\n  dataLine:\n    strokeStyle: \"#00C8FF\"\n    lineWidth: 2\n  dataCircle:\n    fillStyle: \"#00C8FF\"\n    strokeStyle: \"#ffffff\"\n    r: 4\n  style:\n    display: block\n    background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.radar-chart\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.radar-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       name: \"性能\",\n#       maxValue: 100,\n#       value: 80,\n#     },\n#     {\n#       name: \"可用性\",\n#       maxValue: 100,\n#       value: 65,\n#     },\n#     {\n#       name: \"安全性\",\n#       maxValue: 100,\n#       value: 90,\n#     },\n#     {\n#       name: \"扩展性\",\n#       maxValue: 100,\n#       value: 55,\n#     },\n#     {\n#       name: \"维护性\",\n#       maxValue: 100,\n#       value: 70,\n#     },\n#   ];\n#   brick_1.value = 72;\n#   brick_1.width = 400;\n#   brick_1.height = 400;\n#   brick_1.dataFill = {\n#     fillStyle: \"rgba(0, 200, 255, 0.3)\",\n#   };\n#   brick_1.dataLine = {\n#     strokeStyle: \"#00C8FF\",\n#     lineWidth: 2,\n#   };\n#   brick_1.dataCircle = {\n#     fillStyle: \"#00C8FF\",\n#     strokeStyle: \"#ffffff\",\n#     r: 4,\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.title-text": {
-    "doc": "构件 title-text\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\"></data-view.title-text>\n# \n```\n\n### Stroke\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: stroke\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"stroke\";\n# </script>\n# \n```\n\n### Gradient\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: gradient\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.title-text\ndisplayName: WrappedDataViewTitleText\ndescription: 大屏标题文本构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.title-text\n\n> 大屏标题文本构件\n\n## Props\n\n| 属性          | 类型                             | 必填 | 默认值     | 说明                                                            |\n| ------------- | -------------------------------- | ---- | ---------- | --------------------------------------------------------------- |\n| text          | `string`                         | 是   | -          | 标题文本                                                        |\n| type          | `TitleType`                      | 是   | `\"normal\"` | 文本样式，`normal` 纯白， `stroke` 渐变加描边， `gradient` 渐变 |\n| fontSize      | `CSSProperties[\"fontSize\"]`      | 是   | -          | 字体大小                                                        |\n| fontWeight    | `CSSProperties[\"fontWeight\"]`    | 是   | -          | 字体粗细                                                        |\n| letterSpacing | `CSSProperties[\"letterSpacing\"]` | 是   | -          | 字体间距                                                        |\n\n## Examples\n\n### Basic\n\n展示默认样式（纯白色）的标题文本。\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\"></data-view.title-text>\n# \n```\n\n### Stroke\n\n展示渐变加描边样式的标题文本。\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: stroke\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"stroke\";\n# </script>\n# \n```\n\n### Gradient\n\n展示渐变样式的标题文本。\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: gradient\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n\n### Custom Font\n\n展示自定义字体大小、粗细和间距的标题文本。\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 自定义字体\n    type: gradient\n    fontSize: 60px\n    fontWeight: 700\n    letterSpacing: 20px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text\n#   text=\"自定义字体\"\n#   font-size=\"60px\"\n#   font-weight=\"700\"\n#   letter-spacing=\"20px\"\n#   id=\"brick-1\"\n# ></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n"
   },
   "data-view.brick-notification": {
-    "doc": "大屏通知提示构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n# ></data-view.brick-notification>\n# \n```\n\n### Icon\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n    icon:\n      icon: smile\n      lib: antd\n      theme: outlined\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n#   id=\"brick-1\"\n# ></data-view.brick-notification>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.icon = {\n#     icon: \"smile\",\n#     lib: \"antd\",\n#     theme: \"outlined\",\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.brick-notification\ndisplayName: WrappedDataViewBrickNotification\ndescription: 大屏提示构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.brick-notification\n\n> 大屏提示构件\n\n## Props\n\n| 属性    | 类型               | 必填 | 默认值                               | 说明     |\n| ------- | ------------------ | ---- | ------------------------------------ | -------- |\n| message | `string`           | 是   | -                                    | 提示内容 |\n| icon    | `GeneralIconProps` | 否   | `{ lib: \"fa\", icon: \"volume-down\" }` | 图标     |\n\n## Examples\n\n### Basic\n\n展示大屏提示构件的基本用法。\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n# ></data-view.brick-notification>\n# \n```\n\n### Icon\n\n展示自定义图标的大屏提示构件。\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n    icon:\n      icon: smile\n      lib: antd\n      theme: outlined\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n#   id=\"brick-1\"\n# ></data-view.brick-notification>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.icon = {\n#     icon: \"smile\",\n#     lib: \"antd\",\n#     theme: \"outlined\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.tabs-page-title": {
-    "doc": "构件 tabs-page-title\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.tabs-page-title\n  properties:\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.title-text\n          properties:\n            text: 大标题\n            type: gradient\n    start:\n      type: bricks\n      bricks:\n        - brick: data-view.brick-notification\n          properties:\n            message: This is the content of the notification.\n    end:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: \"2022/11/30 17:25 星期四\"\n            style:\n              font-size: 16px\n              color: \"#fff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-page-title>\n#   <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n#   <data-view.brick-notification\n#     slot=\"start\"\n#     message=\"This is the content of the notification.\"\n#   ></data-view.brick-notification>\n#   <div slot=\"end\" style=\"font-size: 16px; color: #fff\">\n#     2022/11/30 17:25 星期四\n#   </div>\n# </data-view.tabs-page-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n\n### TabList\n\n```yaml preview\n- brick: data-view.tabs-page-title\n  properties:\n    tabList:\n      - text: 标签1\n        key: key1\n      - text: 标签2\n        key: key2\n      - text: 标签3\n        key: key3\n      - text: 标签4\n        key: key4\n      - text: 标签5\n        key: key5\n      - text: 标签6\n        key: key6\n    activeKey: key2\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.title-text\n          properties:\n            text: 大标题\n            type: gradient\n    key1:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签一内容\n    key2:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签二内容\n    key3:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签三内容\n    key4:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签四内容\n    key5:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签五内容\n    key6:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签六内容\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-page-title active-key=\"key2\" id=\"brick-1\">\n#   <data-view.title-text text=\"大标题\" id=\"brick-2\"></data-view.title-text>\n#   <div slot=\"key1\">标签一内容</div>\n#   <div slot=\"key2\">标签二内容</div>\n#   <div slot=\"key3\">标签三内容</div>\n#   <div slot=\"key4\">标签四内容</div>\n#   <div slot=\"key5\">标签五内容</div>\n#   <div slot=\"key6\">标签六内容</div>\n# </data-view.tabs-page-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.tabList = [\n#     {\n#       text: \"标签1\",\n#       key: \"key1\",\n#     },\n#     {\n#       text: \"标签2\",\n#       key: \"key2\",\n#     },\n#     {\n#       text: \"标签3\",\n#       key: \"key3\",\n#     },\n#     {\n#       text: \"标签4\",\n#       key: \"key4\",\n#     },\n#     {\n#       text: \"标签5\",\n#       key: \"key5\",\n#     },\n#     {\n#       text: \"标签6\",\n#       key: \"key6\",\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.type = \"gradient\";\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.tabs-page-title\ndisplayName: WrappedDataViewTabsPageTitle\ndescription: 带有tabs的标题构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.tabs-page-title\n\n> 带有tabs的标题构件\n\n## Props\n\n| 属性      | 类型         | 必填 | 默认值 | 说明                       |\n| --------- | ------------ | ---- | ------ | -------------------------- |\n| tabList   | `TabsItem[]` | 是   | -      | 标签，如果没有就不展示标签 |\n| activeKey | `string`     | 是   | -      | 标签高亮显示，默认第一个   |\n\n## Events\n\n| 事件       | detail                             | 说明                                                          |\n| ---------- | ---------------------------------- | ------------------------------------------------------------- |\n| tab.change | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |\n\n## Slots\n\n| 名称      | 说明                       |\n| --------- | -------------------------- |\n| (default) | 默认插槽，用于放置标题内容 |\n| start     | 顶部左边插槽               |\n| end       | 顶部右边插槽               |\n| [key]     | 标签对应的key的插槽        |\n\n## Examples\n\n### Basic\n\n展示带有标题和顶部工具栏的页面标题构件（无标签页）。\n\n```yaml preview\n- brick: data-view.tabs-page-title\n  properties:\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.title-text\n          properties:\n            text: 大标题\n            type: gradient\n    start:\n      type: bricks\n      bricks:\n        - brick: data-view.brick-notification\n          properties:\n            message: This is the content of the notification.\n    end:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: \"2022/11/30 17:25 星期四\"\n            style:\n              font-size: 16px\n              color: \"#fff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-page-title>\n#   <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n#   <data-view.brick-notification\n#     slot=\"start\"\n#     message=\"This is the content of the notification.\"\n#   ></data-view.brick-notification>\n#   <div slot=\"end\" style=\"font-size: 16px; color: #fff\">\n#     2022/11/30 17:25 星期四\n#   </div>\n# </data-view.tabs-page-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n\n### TabList\n\n展示带有多个标签页的页面标题构件，支持通过 activeKey 指定初始激活标签。\n\n```yaml preview\n- brick: data-view.tabs-page-title\n  properties:\n    tabList:\n      - text: 标签1\n        key: key1\n      - text: 标签2\n        key: key2\n      - text: 标签3\n        key: key3\n      - text: 标签4\n        key: key4\n      - text: 标签5\n        key: key5\n      - text: 标签6\n        key: key6\n    activeKey: key2\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.title-text\n          properties:\n            text: 大标题\n            type: gradient\n    key1:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签一内容\n    key2:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签二内容\n    key3:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签三内容\n    key4:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签四内容\n    key5:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签五内容\n    key6:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标签六内容\n  events:\n    tab.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-page-title active-key=\"key2\" id=\"brick-1\">\n#   <data-view.title-text text=\"大标题\" id=\"brick-2\"></data-view.title-text>\n#   <div slot=\"key1\">标签一内容</div>\n#   <div slot=\"key2\">标签二内容</div>\n#   <div slot=\"key3\">标签三内容</div>\n#   <div slot=\"key4\">标签四内容</div>\n#   <div slot=\"key5\">标签五内容</div>\n#   <div slot=\"key6\">标签六内容</div>\n# </data-view.tabs-page-title>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.tabList = [\n#     {\n#       text: \"标签1\",\n#       key: \"key1\",\n#     },\n#     {\n#       text: \"标签2\",\n#       key: \"key2\",\n#     },\n#     {\n#       text: \"标签3\",\n#       key: \"key3\",\n#     },\n#     {\n#       text: \"标签4\",\n#       key: \"key4\",\n#     },\n#     {\n#       text: \"标签5\",\n#       key: \"key5\",\n#     },\n#     {\n#       text: \"标签6\",\n#       key: \"key6\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"tab.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.type = \"gradient\";\n# </script>\n# \n```\n"
   },
   "data-view.top-title-bar": {
-    "doc": "构件 `data-view.top-title-bar`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\"></data-view.top-title-bar>\n# \n```\n\n### Smaple\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n    type: sample\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\" type=\"sample\"></data-view.top-title-bar>\n# \n```\n\n### Square\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n    type: square\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\" type=\"square\"></data-view.top-title-bar>\n# \n```\n"
+    "doc": "---\ntagName: data-view.top-title-bar\ndisplayName: WrappedDataViewTopTitleBar\ndescription: 大屏标题栏三种样式构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.top-title-bar\n\n> 大屏标题栏三种样式构件\n\n## Props\n\n| 属性 | 类型           | 必填 | 默认值     | 说明     |\n| ---- | -------------- | ---- | ---------- | -------- |\n| text | `string`       | 是   | -          | 标题文本 |\n| type | `TitleBarType` | 是   | `\"normal\"` | 标题类型 |\n\n## Examples\n\n### Basic\n\n展示默认（normal）样式的顶部标题栏。\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\"></data-view.top-title-bar>\n# \n```\n\n### Sample\n\n展示 sample 样式的顶部标题栏。\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n    type: sample\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\" type=\"sample\"></data-view.top-title-bar>\n# \n```\n\n### Square\n\n展示 square 样式的顶部标题栏。\n\n```yaml preview\n- brick: data-view.top-title-bar\n  properties:\n    text: 标题\n    type: square\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.top-title-bar text=\"标题\" type=\"square\"></data-view.top-title-bar>\n# \n```\n"
   },
   "data-view.lights-component-title": {
-    "doc": "构件 `data-view.lights-component-title`\n\n## Examples\n\n### Light\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      width: 100%\n      height: 100%\n      background: \"#000000FF\"\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.lights-component-title\n          properties:\n            componentTitle: 标题内容\n            theme: \"light\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"width: 100%; height: 100%; background: #000000ff\">\n#   <data-view.lights-component-title\n#     component-title=\"标题内容\"\n#     theme=\"light\"\n#   ></data-view.lights-component-title>\n# </div>\n# \n```\n### Dark\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      width: 100%\n      height: 100%\n      background: \"#000000FF\"\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.lights-component-title\n          properties:\n            componentTitle: 标题内容\n            theme: \"dark\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"width: 100%; height: 100%; background: #000000ff\">\n#   <data-view.lights-component-title\n#     component-title=\"标题内容\"\n#     theme=\"dark\"\n#   ></data-view.lights-component-title>\n# </div>\n# \n```\n"
+    "doc": "---\ntagName: data-view.lights-component-title\ndisplayName: WrappedDataViewLightsComponentTitle\ndescription: 大屏灯光风格组件标题\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.lights-component-title\n\n> 大屏灯光风格组件标题\n\n## Props\n\n| 属性           | 类型                | 必填 | 默认值    | 说明                                                    |\n| -------------- | ------------------- | ---- | --------- | ------------------------------------------------------- |\n| componentTitle | `string`            | 是   | -         | 组件标题                                                |\n| theme          | `\"light\" \\| \"dark\"` | 否   | `\"light\"` | 主题风格，`light` 为浅色光标图标，`dark` 为深色光标图标 |\n\n## Examples\n\n### Light\n\n展示浅色主题的灯光风格组件标题。\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      width: 100%\n      height: 100%\n      background: \"#000000FF\"\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.lights-component-title\n          properties:\n            componentTitle: 标题内容\n            theme: \"light\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"width: 100%; height: 100%; background: #000000ff\">\n#   <data-view.lights-component-title\n#     component-title=\"标题内容\"\n#     theme=\"light\"\n#   ></data-view.lights-component-title>\n# </div>\n# \n```\n\n### Dark\n\n展示深色主题的灯光风格组件标题。\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      width: 100%\n      height: 100%\n      background: \"#000000FF\"\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: data-view.lights-component-title\n          properties:\n            componentTitle: 标题内容\n            theme: \"dark\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"width: 100%; height: 100%; background: #000000ff\">\n#   <data-view.lights-component-title\n#     component-title=\"标题内容\"\n#     theme=\"dark\"\n#   ></data-view.lights-component-title>\n# </div>\n# \n```\n"
   },
   "data-view.hi-tech-button": {
-    "doc": "构件 `data-view.hi-tech-button`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button>\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Parallelogram\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: parallelogram\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"parallelogram\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Stereoscopic\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: stereoscopic\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"stereoscopic\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Shading\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: shading\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"shading\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Round\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: round\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"round\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Click\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    textContent: BUTTON\n  events:\n    click:\n      action: message.success\n      args:\n        - Click!\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button id=\"brick-1\">BUTTON</data-view.hi-tech-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: \"Click!\" });\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.hi-tech-button\ndisplayName: WrappedDataViewHiTechButton\ndescription: 大屏按钮\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.hi-tech-button\n\n> 大屏按钮\n\n## Props\n\n| 属性        | 类型                                                                     | 必填 | 默认值      | 说明     |\n| ----------- | ------------------------------------------------------------------------ | ---- | ----------- | -------- |\n| type        | `\"default\" \\| \"parallelogram\" \\| \"stereoscopic\" \\| \"shading\" \\| \"round\"` | 否   | `\"default\"` | 按钮类型 |\n| buttonStyle | `React.CSSProperties`                                                    | 否   | -           | 按钮样式 |\n| disabled    | `boolean`                                                                | 否   | `false`     | 是否禁用 |\n\n## Slots\n\n| 名称      | 说明     |\n| --------- | -------- |\n| (default) | 按钮内容 |\n\n## Examples\n\n### Basic\n\n展示默认样式的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button>\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Parallelogram\n\n展示平行四边形样式的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: parallelogram\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"parallelogram\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Stereoscopic\n\n展示立体样式的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: stereoscopic\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"stereoscopic\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Shading\n\n展示阴影样式的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: shading\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"shading\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Round\n\n展示圆形样式的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    type: round\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button type=\"round\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n\n### Click\n\n展示点击事件绑定及按钮样式定制。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    buttonStyle:\n      fontSize: 16px\n  events:\n    click:\n      action: message.success\n      args:\n        - Click!\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button id=\"brick-1\">\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.buttonStyle = {\n#     fontSize: \"16px\",\n#   };\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: \"Click!\" });\n#   });\n# </script>\n# \n```\n\n### Disabled\n\n展示禁用状态的大屏按钮。\n\n```yaml preview\n- brick: data-view.hi-tech-button\n  properties:\n    disabled: true\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: BUTTON\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.hi-tech-button disabled>\n#   <span>BUTTON</span>\n# </data-view.hi-tech-button>\n# \n```\n"
   },
   "data-view.tech-mesh-base-view": {
-    "doc": "构件 `data-view.tech-mesh-base-view`\n\n## Examples\n\n### Basic TabsTitleBar\n\n```yaml preview\n- brick: data-view.tech-mesh-base-view\n  properties:\n    style:\n      min-height: 800px\n  slots:\n    titleBar:\n      type: bricks\n      bricks:\n        - brick: data-view.tabs-page-title\n          slots:\n            \"\":\n              type: bricks\n              bricks:\n                - brick: data-view.title-text\n                  properties:\n                    text: 大标题\n                    type: gradient\n            start:\n              type: bricks\n              bricks:\n                - brick: data-view.brick-notification\n                  properties:\n                    message: This is the content of the notification.\n            end:\n              type: bricks\n              bricks:\n                - brick: div\n                  properties:\n                    textContent: \"2022/11/30 17:25 星期四\"\n                    style:\n                      font-size: 16px\n                      color: \"#fff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tech-mesh-base-view style=\"min-height: 800px\">\n#   <data-view.tabs-page-title slot=\"titleBar\">\n#     <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n#     <data-view.brick-notification\n#       slot=\"start\"\n#       message=\"This is the content of the notification.\"\n#     ></data-view.brick-notification>\n#     <div slot=\"end\" style=\"font-size: 16px; color: #fff\">\n#       2022/11/30 17:25 星期四\n#     </div>\n#   </data-view.tabs-page-title>\n# </data-view.tech-mesh-base-view>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n\n### Sample TitleBar\n\n```yaml preview\n- brick: data-view.tech-mesh-base-view\n  properties:\n    style:\n      min-height: 800px\n  slots:\n    titleBar:\n      type: bricks\n      bricks:\n        - brick: data-view.top-title-bar\n          properties:\n            text: 可视化大屏\n            type: sample\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tech-mesh-base-view style=\"min-height: 800px\">\n#   <data-view.top-title-bar\n#     slot=\"titleBar\"\n#     text=\"可视化大屏\"\n#     type=\"sample\"\n#   ></data-view.top-title-bar>\n# </data-view.tech-mesh-base-view>\n# \n```\n"
+    "doc": "---\ntagName: data-view.tech-mesh-base-view\ndisplayName: WrappedDataViewTechMeshBaseView\ndescription: 大屏框架构件-网格纹\ncategory: big-screen-layout\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.tech-mesh-base-view\n\n> 大屏框架构件-网格纹\n\n## Slots\n\n| 名称     | 说明         |\n| -------- | ------------ |\n| titleBar | 标题栏插槽   |\n| content  | 页面内容插槽 |\n\n## Examples\n\n### Basic TabsTitleBar\n\n展示使用带标签页标题栏的大屏框架构件基础用法。\n\n```yaml preview\n- brick: data-view.tech-mesh-base-view\n  properties:\n    style:\n      min-height: 800px\n  slots:\n    titleBar:\n      type: bricks\n      bricks:\n        - brick: data-view.tabs-page-title\n          slots:\n            \"\":\n              type: bricks\n              bricks:\n                - brick: data-view.title-text\n                  properties:\n                    text: 大标题\n                    type: gradient\n            start:\n              type: bricks\n              bricks:\n                - brick: data-view.brick-notification\n                  properties:\n                    message: This is the content of the notification.\n            end:\n              type: bricks\n              bricks:\n                - brick: div\n                  properties:\n                    textContent: \"2022/11/30 17:25 星期四\"\n                    style:\n                      font-size: 16px\n                      color: \"#fff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tech-mesh-base-view style=\"min-height: 800px\">\n#   <data-view.tabs-page-title slot=\"titleBar\">\n#     <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n#     <data-view.brick-notification\n#       slot=\"start\"\n#       message=\"This is the content of the notification.\"\n#     ></data-view.brick-notification>\n#     <div slot=\"end\" style=\"font-size: 16px; color: #fff\">\n#       2022/11/30 17:25 星期四\n#     </div>\n#   </data-view.tabs-page-title>\n# </data-view.tech-mesh-base-view>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n\n### Sample TitleBar\n\n展示使用顶部标题栏样式为 sample 的大屏框架构件。\n\n```yaml preview\n- brick: data-view.tech-mesh-base-view\n  properties:\n    style:\n      min-height: 800px\n  slots:\n    titleBar:\n      type: bricks\n      bricks:\n        - brick: data-view.top-title-bar\n          properties:\n            text: 可视化大屏\n            type: sample\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tech-mesh-base-view style=\"min-height: 800px\">\n#   <data-view.top-title-bar\n#     slot=\"titleBar\"\n#     text=\"可视化大屏\"\n#     type=\"sample\"\n#   ></data-view.top-title-bar>\n# </data-view.tech-mesh-base-view>\n# \n```\n"
   },
   "data-view.simple-card-item": {
-    "doc": "构件 `data-view.simple-card-item`\n\n## Examples\n\n### Basic\n\n```html preview\n<data-view.simple-card-item>Hello world</data-view.simple-card-item>\n<!-- HTML DELIMITER start (1nbbm8) --\nbrick: data-view.simple-card-item\nproperties:\n  textContent: Hello world\n-- HTML DELIMITER end (1nbbm8) -->\n```\n"
+    "doc": "---\ntagName: data-view.simple-card-item\ndisplayName: WrappedDataViewSimpleCardItem\ndescription: 基础卡片项\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.simple-card-item\n\n> 基础卡片项\n\n## Props\n\n| 属性            | 类型                                | 必填 | 默认值     | 说明     |\n| --------------- | ----------------------------------- | ---- | ---------- | -------- |\n| cardTitle       | `string`                            | 是   | -          | 标题     |\n| description     | `string`                            | 是   | -          | 描述     |\n| status          | `\"normal\" \\| \"warning\"`             | 是   | `\"normal\"` | 状态     |\n| titleStyle      | `CSSProperties`                     | 是   | -          | 标题样式 |\n| desStyle        | `CSSProperties`                     | 是   | -          | 描述样式 |\n| color           | `CSSProperties[\"color\"]`            | 是   | -          | 字体颜色 |\n| background      | `React.CSSProperties[\"background\"]` | 是   | -          | 背景颜色 |\n| descriptionList | `descriptionListItem[]`             | 是   | -          | 描述列表 |\n\n## Examples\n\n### Basic\n\n展示基础卡片项，包含标题和描述文本。\n\n```yaml preview\nbrick: data-view.simple-card-item\nproperties:\n  cardTitle: 服务器状态\n  description: 运行正常\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.simple-card-item\n#   card-title=\"服务器状态\"\n#   description=\"运行正常\"\n# ></data-view.simple-card-item>\n# \n```\n\n### Warning Status\n\n展示告警状态的卡片项，通过 status 属性切换样式。\n\n```yaml preview\nbrick: data-view.simple-card-item\nproperties:\n  cardTitle: 数据库连接\n  description: 连接异常\n  status: warning\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.simple-card-item\n#   card-title=\"数据库连接\"\n#   description=\"连接异常\"\n#   status=\"warning\"\n# ></data-view.simple-card-item>\n# \n```\n\n### Custom Style\n\n展示自定义背景色和字体颜色的卡片项。\n\n```yaml preview\nbrick: data-view.simple-card-item\nproperties:\n  cardTitle: 自定义样式\n  description: 自定义描述文字\n  color: \"#00e0db\"\n  background: \"rgba(0, 100, 200, 0.3)\"\n  titleStyle:\n    fontSize: 18px\n    fontWeight: bold\n  desStyle:\n    fontSize: 14px\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.simple-card-item\n#   card-title=\"自定义样式\"\n#   description=\"自定义描述文字\"\n#   id=\"brick-1\"\n# ></data-view.simple-card-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.color = \"#00e0db\";\n#   brick_1.background = \"rgba(0, 100, 200, 0.3)\";\n#   brick_1.titleStyle = {\n#     fontSize: \"18px\",\n#     fontWeight: \"bold\",\n#   };\n#   brick_1.desStyle = {\n#     fontSize: \"14px\",\n#   };\n# </script>\n# \n```\n\n### Description List\n\n展示包含描述列表的卡片项，用于显示多组键值对信息。\n\n```yaml preview\nbrick: data-view.simple-card-item\nproperties:\n  cardTitle: 主机详情\n  description: 运行正常\n  descriptionList:\n    - key: IP地址\n      value: 192.168.1.100\n    - key: CPU\n      value: 45%\n    - key: 内存\n      value: 62%\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.simple-card-item\n#   card-title=\"主机详情\"\n#   description=\"运行正常\"\n#   id=\"brick-1\"\n# ></data-view.simple-card-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.descriptionList = [\n#     {\n#       key: \"IP地址\",\n#       value: \"192.168.1.100\",\n#     },\n#     {\n#       key: \"CPU\",\n#       value: \"45%\",\n#     },\n#     {\n#       key: \"内存\",\n#       value: \"62%\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.basic-index-group": {
-    "doc": "构件 `data-view.basic-index-group`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: div\n  properties:\n    textContent: 左右布局，有描述，不换行\n- brick: data-view.basic-index-group\n  properties:\n    width: 1000\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n        description: 较昨日增长24.5%\n        trendIcon: up\n      - type: cloud\n        title: 容器\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: network\n        title: 网络设施\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: database\n        title: 数据库\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n- brick: div\n  properties:\n    textContent: 左右布局，有描述，换行\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 500\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n        description: 较昨日增长24.5%\n        trendIcon: up\n      - type: cloud\n        title: 容器\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: network\n        title: 网络设施\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: database\n        title: 数据库\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n- brick: div\n  properties:\n    textContent: 左右布局，无描述\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 500\n    gap: 48\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n      - type: cloud\n        title: 容器\n        number: 24\n      - type: network\n        title: 网络设施\n        number: 24\n      - type: database\n        title: 数据库\n        number: 24\n- brick: div\n  properties:\n    textContent: 上下布局\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 1000\n    layout: top-bottom\n    gap: 48\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n      - type: cloud\n        title: 容器\n        number: 24\n      - type: network\n        title: 网络设施\n        number: 24\n      - type: database\n        title: 数据库\n        number: 24\n# -- YAML DELIMITER (1nbbm8) --\n# <div>左右布局，有描述，不换行</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-1\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">左右布局，有描述，换行</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-2\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">左右布局，无描述</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-3\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">上下布局</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-4\"\n# ></data-view.basic-index-group>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.width = 1000;\n#   brick_1.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#       description: \"较昨日增长24.5%\",\n#       trendIcon: \"up\",\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.width = 500;\n#   brick_2.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#       description: \"较昨日增长24.5%\",\n#       trendIcon: \"up\",\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#   ];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.width = 500;\n#   brick_3.gap = 48;\n#   brick_3.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#     },\n#   ];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.width = 1000;\n#   brick_4.layout = \"top-bottom\";\n#   brick_4.gap = 48;\n#   brick_4.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.basic-index-group\ndisplayName: WrappedDataViewBasicIndexGroup\ndescription: 基础指标组构件\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.basic-index-group\n\n> 基础指标组构件\n\n## Props\n\n| 属性     | 类型          | 必填 | 默认值         | 说明                     |\n| -------- | ------------- | ---- | -------------- | ------------------------ |\n| itemList | `ItemProps[]` | 是   | -              | 指标组的数据源           |\n| width    | `number`      | 否   | -              | 容器组宽度               |\n| gap      | `number`      | 否   | `30`           | 指标卡片之间的间距       |\n| layout   | `string`      | 否   | `\"left-right\"` | 布局，左右或上下两种形式 |\n\n## Examples\n\n### Basic\n\n展示基础指标组的多种布局形式，包含有描述和无描述的左右布局及上下布局。\n\n```yaml preview\n- brick: div\n  properties:\n    textContent: 左右布局，有描述，不换行\n- brick: data-view.basic-index-group\n  properties:\n    width: 1000\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n        description: 较昨日增长24.5%\n        trendIcon: up\n      - type: cloud\n        title: 容器\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: network\n        title: 网络设施\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: database\n        title: 数据库\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n- brick: div\n  properties:\n    textContent: 左右布局，有描述，换行\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 500\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n        description: 较昨日增长24.5%\n        trendIcon: up\n      - type: cloud\n        title: 容器\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: network\n        title: 网络设施\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n      - type: database\n        title: 数据库\n        number: 24\n        description: 较昨日下降10.2%\n        trendIcon: down\n- brick: div\n  properties:\n    textContent: 左右布局，无描述\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 500\n    gap: 48\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n      - type: cloud\n        title: 容器\n        number: 24\n      - type: network\n        title: 网络设施\n        number: 24\n      - type: database\n        title: 数据库\n        number: 24\n- brick: div\n  properties:\n    textContent: 上下布局\n    style:\n      margin-top: 20px\n- brick: data-view.basic-index-group\n  properties:\n    width: 1000\n    layout: top-bottom\n    gap: 48\n    style:\n      margin-top: 20px\n    itemList:\n      - type: host\n        title: 主机\n        number: 289\n      - type: cloud\n        title: 容器\n        number: 24\n      - type: network\n        title: 网络设施\n        number: 24\n      - type: database\n        title: 数据库\n        number: 24\n# -- YAML DELIMITER (1nbbm8) --\n# <div>左右布局，有描述，不换行</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-1\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">左右布局，有描述，换行</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-2\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">左右布局，无描述</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-3\"\n# ></data-view.basic-index-group>\n# <div style=\"margin-top: 20px\">上下布局</div>\n# <data-view.basic-index-group\n#   style=\"margin-top: 20px\"\n#   id=\"brick-4\"\n# ></data-view.basic-index-group>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.width = 1000;\n#   brick_1.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#       description: \"较昨日增长24.5%\",\n#       trendIcon: \"up\",\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.width = 500;\n#   brick_2.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#       description: \"较昨日增长24.5%\",\n#       trendIcon: \"up\",\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#       description: \"较昨日下降10.2%\",\n#       trendIcon: \"down\",\n#     },\n#   ];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.width = 500;\n#   brick_3.gap = 48;\n#   brick_3.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#     },\n#   ];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.width = 1000;\n#   brick_4.layout = \"top-bottom\";\n#   brick_4.gap = 48;\n#   brick_4.itemList = [\n#     {\n#       type: \"host\",\n#       title: \"主机\",\n#       number: 289,\n#     },\n#     {\n#       type: \"cloud\",\n#       title: \"容器\",\n#       number: 24,\n#     },\n#     {\n#       type: \"network\",\n#       title: \"网络设施\",\n#       number: 24,\n#     },\n#     {\n#       type: \"database\",\n#       title: \"数据库\",\n#       number: 24,\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.data-display-flipper": {
-    "doc": "构件 `data-view.data-display-flipper`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    flipperTitle: 翻牌器标题\n    data: 1281925.15\n    unit: 万\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper\n#   flipper-title=\"翻牌器标题\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n# </script>\n# \n```\n\n### showDefaultPrefix\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    data: 1281925.15\n    unit: 万\n    separator: \" \"\n    showDefaultPrefix: false\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper id=\"brick-1\"></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n#   brick_1.separator = \" \";\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.data-display-flipper\ndisplayName: WrappedDataViewDataDisplayFlipper\ndescription: 翻牌器-type-3\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.data-display-flipper\n\n> 翻牌器-type-3\n\n## Props\n\n| 属性              | 类型                               | 必填 | 默认值  | 说明                         |\n| ----------------- | ---------------------------------- | ---- | ------- | ---------------------------- |\n| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题                   |\n| data              | `number \\| string`                 | 是   | -       | 翻牌器数值                   |\n| unit              | `string`                           | 是   | -       | 翻牌器单位                   |\n| flipperStyle      | `React.CSSProperties \\| undefined` | 否   | -       | 翻牌器样式                   |\n| enableTitlePrefix | `boolean \\| undefined`             | 否   | `false` | 是否启用标题前缀插槽         |\n| showDefaultPrefix | `boolean \\| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片     |\n| separator         | `string`                           | 否   | `\"/\"`   | 翻牌器数字和单位之间的分隔符 |\n\n## Slots\n\n| 名称        | 说明                                                |\n| ----------- | --------------------------------------------------- |\n| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |\n\n## Examples\n\n### Basic\n\n展示带标题、数值和单位的翻牌器。\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    flipperTitle: 翻牌器标题\n    data: 1281925.15\n    unit: 万\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper\n#   flipper-title=\"翻牌器标题\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n# </script>\n# \n```\n\n### Show default prefix\n\n隐藏默认前缀图片并自定义分隔符样式。\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    data: 1281925.15\n    unit: 万\n    separator: \" \"\n    showDefaultPrefix: false\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper id=\"brick-1\"></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n#   brick_1.separator = \" \";\n# </script>\n# \n```\n\n### Custom style\n\n通过 flipperStyle 自定义翻牌器容器样式。\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    flipperTitle: 资产总量\n    data: 99999\n    unit: 台\n    separator: \"-\"\n    flipperStyle:\n      color: \"#00c8ff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper\n#   flipper-title=\"资产总量\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 99999;\n#   brick_1.unit = \"台\";\n#   brick_1.separator = \"-\";\n#   brick_1.flipperStyle = {\n#     color: \"#00c8ff\",\n#   };\n# </script>\n# \n```\n\n### Enable title prefix slot\n\n启用自定义标题前缀插槽，替代默认前缀图片。\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    flipperTitle: 主机数量\n    data: 3456\n    unit: 台\n    enableTitlePrefix: true\n  slots:\n    titlePrefix:\n      bricks:\n        - brick: span\n          properties:\n            textContent: \"★\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper\n#   flipper-title=\"主机数量\"\n#   enable-title-prefix\n#   id=\"brick-1\"\n# >\n#   <span slot=\"titlePrefix\">★</span>\n# </data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 3456;\n#   brick_1.unit = \"台\";\n# </script>\n# \n```\n"
   },
   "data-view.data-display-flipper-fifth": {
-    "doc": "构件 `data-view.data-display-flipper-fifth`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 195.15\n    unit: 单位\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 195.15;\n#   brick_1.unit = \"单位\";\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.data-display-flipper-fifth\ndisplayName: WrappedDataViewDataDisplayFlipperFifth\ndescription: 翻牌器-type-5\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.data-display-flipper-fifth\n\n> 翻牌器-type-5\n\n## Props\n\n| 属性              | 类型                               | 必填 | 默认值  | 说明                     |\n| ----------------- | ---------------------------------- | ---- | ------- | ------------------------ |\n| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题               |\n| data              | `number \\| string`                 | 是   | -       | 翻牌器数值               |\n| unit              | `string`                           | 是   | -       | 翻牌器单位               |\n| flipperStyle      | `React.CSSProperties \\| undefined` | 否   | -       | 翻牌器样式               |\n| enableTitlePrefix | `boolean \\| undefined`             | 否   | `false` | 是否启用标题前缀插槽     |\n| showDefaultPrefix | `boolean \\| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片 |\n\n## Slots\n\n| 名称        | 说明                                                |\n| ----------- | --------------------------------------------------- |\n| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |\n\n## Examples\n\n### Basic\n\n展示带标题、数值和单位的 type-5 翻牌器。\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 195.15\n    unit: 单位\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 195.15;\n#   brick_1.unit = \"单位\";\n# </script>\n# \n```\n\n### Show default prefix\n\n隐藏默认前缀图片的翻牌器。\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 资产数量\n    data: 10086\n    unit: 台\n    showDefaultPrefix: false\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"资产数量\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 10086;\n#   brick_1.unit = \"台\";\n# </script>\n# \n```\n\n### Custom style\n\n通过 flipperStyle 自定义翻牌器容器样式。\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 在线主机\n    data: 3456\n    unit: 台\n    flipperStyle:\n      color: \"#00c8ff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"在线主机\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 3456;\n#   brick_1.unit = \"台\";\n#   brick_1.flipperStyle = {\n#     color: \"#00c8ff\",\n#   };\n# </script>\n# \n```\n\n### Enable title prefix slot\n\n启用自定义标题前缀插槽，替代默认前缀图片。\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 主机数量\n    data: 8888\n    unit: 台\n    enableTitlePrefix: true\n  slots:\n    titlePrefix:\n      bricks:\n        - brick: span\n          properties:\n            textContent: \"◆\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"主机数量\"\n#   enable-title-prefix\n#   id=\"brick-1\"\n# >\n#   <span slot=\"titlePrefix\">◆</span>\n# </data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 8888;\n#   brick_1.unit = \"台\";\n# </script>\n# \n```\n"
   },
   "data-view.data-display-flipper-sixth": {
-    "doc": "构件 `data-view.data-display-flipper-sixth`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper-sixth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 699\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-sixth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-sixth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 699;\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.data-display-flipper-sixth\ndisplayName: WrappedDataViewDataDisplayFlipperSixth\ndescription: 翻牌器-type-6\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.data-display-flipper-sixth\n\n> 翻牌器-type-6\n\n## Props\n\n| 属性         | 类型                  | 必填 | 默认值 | 说明       |\n| ------------ | --------------------- | ---- | ------ | ---------- |\n| flipperTitle | `string`              | -    | -      | 翻牌器标题 |\n| data         | `number \\| string`    | -    | -      | 翻牌器数值 |\n| flipperStyle | `React.CSSProperties` | -    | -      | 翻牌器样式 |\n\n## Examples\n\n### Basic\n\n展示翻牌器基本用法，包含标题和数值。\n\n```yaml preview\nbrick: data-view.data-display-flipper-sixth\nproperties:\n  flipperTitle: 翻牌器名称\n  data: 699\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-sixth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-sixth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 699;\n# </script>\n# \n```\n\n### Custom Style\n\n使用 flipperStyle 自定义翻牌器容器样式。\n\n```yaml preview\nbrick: data-view.data-display-flipper-sixth\nproperties:\n  flipperTitle: 在线设备\n  data: 12345\n  flipperStyle:\n    width: 200px\n    color: \"#00eaff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-sixth\n#   flipper-title=\"在线设备\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-sixth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 12345;\n#   brick_1.flipperStyle = {\n#     width: \"200px\",\n#     color: \"#00eaff\",\n#   };\n# </script>\n# \n```\n"
   },
   "data-view.indicator-card": {
-    "doc": "构件 `data-view.indicator-card`\n\n## Examples\n\n### Column\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Column Townhouse\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row Townhouse\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.indicator-card\ndisplayName: WrappedDataViewIndicatorCard\ndescription: 指标卡片\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.indicator-card\n\n> 指标卡片\n\n## Props\n\n| 属性       | 类型                                                         | 必填 | 默认值     | 说明                                                        |\n| ---------- | ------------------------------------------------------------ | ---- | ---------- | ----------------------------------------------------------- |\n| layout     | `\"column\" \\| \"column-townhouse\" \\| \"row\" \\| \"row-townhouse\"` | 否   | `\"column\"` | 展示类型，`column` 类型为上下三行、`row` 类型为左右两行模式 |\n| datasource | `Datasource[]`                                               | 否   | `[]`       | 数据源                                                      |\n\n## Examples\n\n### Column\n\n展示纵向排列（上下三行）的指标卡片。\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Column Townhouse\n\n展示纵向联排（多列上下）的指标卡片。\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row\n\n展示横向排列（左右两行）的指标卡片。\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row Townhouse\n\n展示横向联排（多行左右）的指标卡片。\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.progress-bar-list": {
-    "doc": "构件 `data-view.progress-bar-list`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: data-view.progress-bar-list\nproperties:\n  dataSource:\n    - title: 资源1\n      count: 123\n    - title: 资源2\n      count: 39\n    - title: 资源3\n      count: 23\n    - title: 资源4\n      count: 13\n    - title: 资源5\n      count: 49\n      barBackground: linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\n      loopBackground: rgb(255, 222, 104)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.progress-bar-list id=\"brick-1\"></data-view.progress-bar-list>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       title: \"资源1\",\n#       count: 123,\n#     },\n#     {\n#       title: \"资源2\",\n#       count: 39,\n#     },\n#     {\n#       title: \"资源3\",\n#       count: 23,\n#     },\n#     {\n#       title: \"资源4\",\n#       count: 13,\n#     },\n#     {\n#       title: \"资源5\",\n#       count: 49,\n#       barBackground:\n#         \"linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\",\n#       loopBackground: \"rgb(255, 222, 104)\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.progress-bar-list\ndisplayName: WrappedDataViewProgressBarList\ndescription: 大屏进度条列表\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.progress-bar-list\n\n> 大屏进度条列表\n\n## Props\n\n| 属性       | 类型     | 必填 | 默认值 | 说明                                               |\n| ---------- | -------- | ---- | ------ | -------------------------------------------------- |\n| dataSource | `Data[]` | 否   | `[]`   | 数据列表，每项包含标题、数值及可选的进度条颜色配置 |\n\n## Examples\n\n### Basic\n\n展示大屏进度条列表的基本用法，数据项支持自定义颜色。\n\n```yaml preview\nbrick: data-view.progress-bar-list\nproperties:\n  dataSource:\n    - title: 资源1\n      count: 123\n    - title: 资源2\n      count: 39\n    - title: 资源3\n      count: 23\n    - title: 资源4\n      count: 13\n    - title: 资源5\n      count: 49\n      barBackground: linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\n      loopBackground: rgb(255, 222, 104)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.progress-bar-list id=\"brick-1\"></data-view.progress-bar-list>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       title: \"资源1\",\n#       count: 123,\n#     },\n#     {\n#       title: \"资源2\",\n#       count: 39,\n#     },\n#     {\n#       title: \"资源3\",\n#       count: 23,\n#     },\n#     {\n#       title: \"资源4\",\n#       count: 13,\n#     },\n#     {\n#       title: \"资源5\",\n#       count: 49,\n#       barBackground:\n#         \"linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))\",\n#       loopBackground: \"rgb(255, 222, 104)\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.china-map-chart": {
-    "doc": "中国地图图表构件，可以显示省级指标数据\n\n已废弃，请使用 [`data-view.china-map`](china-map.mdx)。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n  dataSource:\n    - text: \"西藏 12311\"\n      city: 西藏\n    - text: \"四川 89781169\"\n      city: 四川\n    - text: \"台湾 234181\"\n      city: 台湾\n    - text: \"江西 21348\"\n      city: 江西\n# Currently this brick only looks well within dark theme\nlifeCycle:\n  onPageLoad:\n    action: theme.setTheme\n    args:\n      - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\"></data-view.china-map-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       city: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Fill container\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map-chart\n    properties:\n      fillContainer: true\n      dataSource:\n        - text: \"西藏 12311\"\n          city: 西藏\n        - text: \"四川 89781169\"\n          city: 四川\n        - text: \"台湾 234181\"\n          city: 台湾\n        - text: \"江西 21348\"\n          city: 江西\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map-chart\n#     fill-container\n#     id=\"brick-1\"\n#   ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       city: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Province map\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map-chart\n    properties:\n      fillContainer: true\n      province: 广东\n      dataSource:\n        - text: \"广州 12311\"\n          city: 广州\n        - text: \"深圳 89781169\"\n          city: 深圳\n        - text: \"湛江 234181\"\n          city: 湛江\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map-chart\n#     fill-container\n#     province=\"广东\"\n#     id=\"brick-1\"\n#   ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"广州 12311\",\n#       city: \"广州\",\n#     },\n#     {\n#       text: \"深圳 89781169\",\n#       city: \"深圳\",\n#     },\n#     {\n#       text: \"湛江 234181\",\n#       city: \"湛江\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### With detail\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n  detailContentStyle:\n    background: \"yellow\"\n  dataSource:\n    - text: \"西藏 12311\"\n      detailDisplayLocation: \"textBottom\"\n      city: 西藏\n    - text: \"四川 89781169\"\n      detailDisplayLocation: \"textBottom\"\n      city: 四川\n    - text: \"台湾 234181\"\n      detailDisplayLocation: \"pageCenter\"\n      city: 台湾\n    - text: \"江西 21348\"\n      detailDisplayLocation: \"pageCenter\"\n      city: 江西\nevents:\n  detail.open.change:\n    - action: console.log\nslots:\n  detail:\n    bricks:\n      - brick: div\n        properties:\n          textContent: 内容区\n# Currently this brick only looks well within dark theme\nlifeCycle:\n  onPageLoad:\n    action: theme.setTheme\n    args:\n      - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\">\n#   <div slot=\"detail\">内容区</div>\n# </data-view.china-map-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.detailContentStyle = {\n#     background: \"yellow\",\n#   };\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       detailDisplayLocation: \"textBottom\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       detailDisplayLocation: \"textBottom\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       detailDisplayLocation: \"pageCenter\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       detailDisplayLocation: \"pageCenter\",\n#       city: \"江西\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"detail.open.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.china-map-chart\ndisplayName: WrappedDataViewChinaMapChart\ndescription: 中国地图图表构件，可以显示省级指标数据\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\ndeprecated: 已废弃，请使用 `data-view.china-map`\n---\n\n# data-view.china-map-chart\n\n> 中国地图图表构件，可以显示省级指标数据\n\n**已废弃，请使用 [`data-view.china-map`](china-map.md)。**\n\n## Props\n\n| 属性               | 类型                         | 必填 | 默认值 | 说明                                                                   |\n| ------------------ | ---------------------------- | ---- | ------ | ---------------------------------------------------------------------- |\n| province           | `string \\| undefined`        | 否   | -      | 省份名称，例如\"广东\"。如果设置，则只显示该省份的地图，否则显示全国地图 |\n| dataSource         | `DataSource[] \\| undefined`  | 否   | -      | 数据源                                                                 |\n| detailContentStyle | `CSSProperties \\| undefined` | 否   | -      | 描述内容样式                                                           |\n| fillContainer      | `boolean \\| undefined`       | 否   | -      | 是否铺满容器（注意：该属性不同时兼容 detail 插槽）                     |\n\n## Events\n\n| 事件               | detail                                                                                           | 说明                       |\n| ------------------ | ------------------------------------------------------------------------------------------------ | -------------------------- |\n| detail.open.change | `{ open: boolean; data: Record<string, any>; }` — { open: 当前是否可见, data: 当前展示的数据项 } | 当提示可见性开始变化时触发 |\n\n## Slots\n\n| 名称   | 说明                       |\n| ------ | -------------------------- |\n| detail | 点击标签时弹出的详情内容区 |\n\n## Examples\n\n### Basic\n\n展示全国地图并在各省显示文字标签。\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n  dataSource:\n    - text: \"西藏 12311\"\n      city: 西藏\n    - text: \"四川 89781169\"\n      city: 四川\n    - text: \"台湾 234181\"\n      city: 台湾\n    - text: \"江西 21348\"\n      city: 江西\n# Currently this brick only looks well within dark theme\nlifeCycle:\n  onPageLoad:\n    action: theme.setTheme\n    args:\n      - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\"></data-view.china-map-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       city: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Fill container\n\n铺满容器展示地图。\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map-chart\n    properties:\n      fillContainer: true\n      dataSource:\n        - text: \"西藏 12311\"\n          city: 西藏\n        - text: \"四川 89781169\"\n          city: 四川\n        - text: \"台湾 234181\"\n          city: 台湾\n        - text: \"江西 21348\"\n          city: 江西\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map-chart\n#     fill-container\n#     id=\"brick-1\"\n#   ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       city: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Province map\n\n展示指定省份的地图。\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map-chart\n    properties:\n      fillContainer: true\n      province: 广东\n      dataSource:\n        - text: \"广州 12311\"\n          city: 广州\n        - text: \"深圳 89781169\"\n          city: 深圳\n        - text: \"湛江 234181\"\n          city: 湛江\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map-chart\n#     fill-container\n#     province=\"广东\"\n#     id=\"brick-1\"\n#   ></data-view.china-map-chart>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"广州 12311\",\n#       city: \"广州\",\n#     },\n#     {\n#       text: \"深圳 89781169\",\n#       city: \"深圳\",\n#     },\n#     {\n#       text: \"湛江 234181\",\n#       city: \"湛江\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### With detail\n\n点击标签时展示详情内容，并通过事件监听可见性变化。\n\n```yaml preview height=\"600px\"\nbrick: data-view.china-map-chart\nproperties:\n  detailContentStyle:\n    background: \"yellow\"\n  dataSource:\n    - text: \"西藏 12311\"\n      detailDisplayLocation: \"textBottom\"\n      city: 西藏\n    - text: \"四川 89781169\"\n      detailDisplayLocation: \"textBottom\"\n      city: 四川\n    - text: \"台湾 234181\"\n      detailDisplayLocation: \"pageCenter\"\n      city: 台湾\n    - text: \"江西 21348\"\n      detailDisplayLocation: \"pageCenter\"\n      city: 江西\nevents:\n  detail.open.change:\n    - action: console.log\nslots:\n  detail:\n    bricks:\n      - brick: div\n        properties:\n          textContent: 内容区\n# Currently this brick only looks well within dark theme\nlifeCycle:\n  onPageLoad:\n    action: theme.setTheme\n    args:\n      - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.china-map-chart id=\"brick-1\">\n#   <div slot=\"detail\">内容区</div>\n# </data-view.china-map-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.detailContentStyle = {\n#     background: \"yellow\",\n#   };\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       detailDisplayLocation: \"textBottom\",\n#       city: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       detailDisplayLocation: \"textBottom\",\n#       city: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       detailDisplayLocation: \"pageCenter\",\n#       city: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       detailDisplayLocation: \"pageCenter\",\n#       city: \"江西\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"detail.open.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.crystal-ball-indicator": {
-    "doc": "中间是水晶球动画的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.crystal-ball-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.crystal-ball-indicator\n#     id=\"brick-1\"\n#   ></data-view.crystal-ball-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.crystal-ball-indicator\ndisplayName: WrappedDataViewCrystalBallIndicator\ndescription: 有水晶球动画的数据展示构件。\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.crystal-ball-indicator\n\n> 有水晶球动画的数据展示构件。\n\n## Props\n\n| 属性             | 类型                            | 必填 | 默认值 | 说明                                         |\n| ---------------- | ------------------------------- | ---- | ------ | -------------------------------------------- |\n| dataSource       | `DataItem[] \\| undefined`       | 否   | -      | 指标数据列表（显示在环上，最多显示12项数据） |\n| centerDataSource | `DataItem \\| undefined`         | 否   | -      | 中心数据（显示在中心水晶球内）               |\n| cornerDataSource | `CornerDataItem[] \\| undefined` | 否   | -      | 左上角指标数据列表                           |\n| maxScale         | `number \\| undefined`           | 否   | `1`    | 最大缩放比例                                 |\n\n## Examples\n\n### Basic\n\n展示带水晶球动画的数据环形指标卡，包含环上标签、中心数值及左上角指标。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.crystal-ball-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.crystal-ball-indicator\n#     id=\"brick-1\"\n#   ></data-view.crystal-ball-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Max scale\n\n通过 maxScale 限制构件的最大缩放比例。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.crystal-ball-indicator\n    properties:\n      maxScale: 0.8\n      centerDataSource:\n        label: 在线主机\n        value: 8899\n      dataSource:\n        - label: 物理机\n          value: 1200\n        - label: 虚拟机\n          value: 5678\n        - label: 容器\n          value: 2021\n      cornerDataSource:\n        - label: 新增\n          value: 15\n          color: \"#00c8ff\"\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.crystal-ball-indicator\n#     max-scale=\"0.8\"\n#     id=\"brick-1\"\n#   ></data-view.crystal-ball-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"在线主机\",\n#     value: 8899,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"物理机\",\n#       value: 1200,\n#     },\n#     {\n#       label: \"虚拟机\",\n#       value: 5678,\n#     },\n#     {\n#       label: \"容器\",\n#       value: 2021,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"新增\",\n#       value: 15,\n#       color: \"#00c8ff\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.globe-with-halo-indicator": {
-    "doc": "地球加光环的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-halo-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-halo-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-halo-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.globe-with-halo-indicator\ndisplayName: WrappedDataViewGlobeWithHaloIndicator\ndescription: 地球加光环的数据展示构件。\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.globe-with-halo-indicator\n\n> 地球加光环的数据展示构件。\n\n## Props\n\n| 属性             | 类型               | 必填 | 默认值 | 说明                                    |\n| ---------------- | ------------------ | ---- | ------ | --------------------------------------- |\n| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示8项 |\n| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）            |\n| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                      |\n| maxScale         | `number`           | -    | `1`    | 最大缩放比例                            |\n\n其中 `DataItem` 的类型为：\n\n| 字段  | 类型               | 说明     |\n| ----- | ------------------ | -------- |\n| label | `string`           | 标签文字 |\n| value | `string \\| number` | 数值     |\n\n`CornerDataItem` 在 `DataItem` 基础上扩展：\n\n| 字段  | 类型     | 说明           |\n| ----- | -------- | -------------- |\n| color | `string` | 可选，标签颜色 |\n\n## Examples\n\n### Basic\n\n展示地球加光环的完整用法，包含中心数据、环上指标和角落指标。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-halo-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-halo-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-halo-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Max Scale\n\n通过 maxScale 限制最大缩放比例。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-halo-indicator\n    properties:\n      maxScale: 0.8\n      centerDataSource:\n        label: 服务总数\n        value: 8800\n      dataSource:\n        - label: 健康服务\n          value: 7200\n        - label: 异常服务\n          value: 1600\n      cornerDataSource:\n        - label: 新增\n          value: 55\n          color: \"#83F5E1\"\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-halo-indicator\n#     max-scale=\"0.8\"\n#     id=\"brick-1\"\n#   ></data-view.globe-with-halo-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"服务总数\",\n#     value: 8800,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"健康服务\",\n#       value: 7200,\n#     },\n#     {\n#       label: \"异常服务\",\n#       value: 1600,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"新增\",\n#       value: 55,\n#       color: \"#83F5E1\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.globe-with-gear-indicator": {
-    "doc": "地球加轮盘的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-gear-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-gear-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-gear-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.globe-with-gear-indicator\ndisplayName: WrappedDataViewGlobeWithGearIndicator\ndescription: 地球加轮盘的数据展示构件。\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.globe-with-gear-indicator\n\n> 地球加轮盘的数据展示构件。\n\n## Props\n\n| 属性             | 类型               | 必填 | 默认值 | 说明                                     |\n| ---------------- | ------------------ | ---- | ------ | ---------------------------------------- |\n| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示12项 |\n| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心水晶球内）           |\n| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                       |\n| maxScale         | `number`           | -    | `1`    | 最大缩放比例                             |\n\n其中 `DataItem` 的类型为：\n\n| 字段  | 类型               | 说明     |\n| ----- | ------------------ | -------- |\n| label | `string`           | 标签文字 |\n| value | `string \\| number` | 数值     |\n\n`CornerDataItem` 在 `DataItem` 基础上扩展：\n\n| 字段  | 类型     | 说明           |\n| ----- | -------- | -------------- |\n| color | `string` | 可选，标签颜色 |\n\n## Examples\n\n### Basic\n\n展示地球加轮盘的完整用法，包含中心数据、环上指标和角落指标。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-gear-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-gear-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-gear-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Max Scale\n\n通过 maxScale 限制最大缩放比例，避免在大屏幕上过度放大。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-gear-indicator\n    properties:\n      maxScale: 0.8\n      centerDataSource:\n        label: 设备总数\n        value: 5680\n      dataSource:\n        - label: 正常设备\n          value: 4200\n        - label: 异常设备\n          value: 1480\n      cornerDataSource:\n        - label: 新增\n          value: 120\n          color: \"#83F5E1\"\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-gear-indicator\n#     max-scale=\"0.8\"\n#     id=\"brick-1\"\n#   ></data-view.globe-with-gear-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"设备总数\",\n#     value: 5680,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"正常设备\",\n#       value: 4200,\n#     },\n#     {\n#       label: \"异常设备\",\n#       value: 1480,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"新增\",\n#       value: 120,\n#       color: \"#83F5E1\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.bubbles-indicator": {
-    "doc": "构件 `data-view.bubbles-indicator`\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.bubbles-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.bubbles-indicator id=\"brick-1\"></data-view.bubbles-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.bubbles-indicator\ndisplayName: WrappedDataViewBubblesIndicator\ndescription: 气泡样式的数据展示构件。\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.bubbles-indicator\n\n> 气泡样式的数据展示构件。\n\n## Props\n\n| 属性             | 类型               | 必填 | 默认值 | 说明                                             |\n| ---------------- | ------------------ | ---- | ------ | ------------------------------------------------ |\n| dataSource       | `DataItem[]`       | 否   | -      | 指标数据列表（显示在环上），注意最多显示12项数据 |\n| centerDataSource | `DataItem`         | 否   | -      | 中心数据（显示在中心水晶球内）                   |\n| cornerDataSource | `CornerDataItem[]` | 否   | -      | 左上角指标数据列表                               |\n| maxScale         | `number`           | 否   | `1`    | 最大缩放比例                                     |\n\n## Examples\n\n### Basic\n\n展示气泡指标构件的基本用法，包含中心数据、环上指标数据及左上角角标数据（仅在暗色主题下生效）。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.bubbles-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n      maxScale: 1\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.bubbles-indicator\n#     max-scale=\"1\"\n#     id=\"brick-1\"\n#   ></data-view.bubbles-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.globe-with-orbit-indicator": {
-    "doc": "地球加轨道的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-orbit-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n        - label: 其他资产\n          value: 4203\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-orbit-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-orbit-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#     {\n#       label: \"其他资产\",\n#       value: 4203,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.globe-with-orbit-indicator\ndisplayName: WrappedDataViewGlobeWithOrbitIndicator\ndescription: 地球加轨道的数据展示构件。\ncategory: big-screen-content\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.globe-with-orbit-indicator\n\n> 地球加轨道的数据展示构件。\n\n## Props\n\n| 属性             | 类型               | 必填 | 默认值 | 说明                                      |\n| ---------------- | ------------------ | ---- | ------ | ----------------------------------------- |\n| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在轨道上），最多显示8项 |\n| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）              |\n| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                        |\n| maxScale         | `number`           | -    | `1`    | 最大缩放比例                              |\n\n其中 `DataItem` 的类型为：\n\n| 字段  | 类型               | 说明     |\n| ----- | ------------------ | -------- |\n| label | `string`           | 标签文字 |\n| value | `string \\| number` | 数值     |\n\n`CornerDataItem` 在 `DataItem` 基础上扩展：\n\n| 字段  | 类型     | 说明           |\n| ----- | -------- | -------------- |\n| color | `string` | 可选，标签颜色 |\n\n## Examples\n\n### Basic\n\n展示地球加轨道的完整用法，包含中心数据、轨道上指标和角落指标。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-orbit-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n        - label: 其他资产\n          value: 4203\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-orbit-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-orbit-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#     {\n#       label: \"其他资产\",\n#       value: 4203,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Max Scale\n\n通过 maxScale 限制最大缩放比例。\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-orbit-indicator\n    properties:\n      maxScale: 0.8\n      centerDataSource:\n        label: 主机总数\n        value: 6000\n      dataSource:\n        - label: 运行中\n          value: 5200\n        - label: 已停止\n          value: 800\n      cornerDataSource:\n        - label: 新增主机\n          value: 30\n          color: \"#83F5E1\"\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-orbit-indicator\n#     max-scale=\"0.8\"\n#     id=\"brick-1\"\n#   ></data-view.globe-with-orbit-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"主机总数\",\n#     value: 6000,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"运行中\",\n#       value: 5200,\n#     },\n#     {\n#       label: \"已停止\",\n#       value: 800,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"新增主机\",\n#       value: 30,\n#       color: \"#83F5E1\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "data-view.china-map": {
-    "doc": "构件 `data-view.china-map`\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      dataSource:\n        - text: \"西藏 12311\"\n          province: 西藏\n        - text: \"四川 89781169\"\n          province: 四川\n        - text: \"台湾 234181\"\n          province: 台湾\n        - text: \"江西 21348\"\n          province: 江西\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       province: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       province: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       province: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       province: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Province map\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      province: 广东\n      dataSource:\n        - text: \"广州 12311\"\n          city: 广州\n        - text: \"深圳 89781169\"\n          city: 深圳\n        - text: \"湛江 234181\"\n          city: 湛江\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map province=\"广东\" id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"广州 12311\",\n#       city: \"广州\",\n#     },\n#     {\n#       text: \"深圳 89781169\",\n#       city: \"深圳\",\n#     },\n#     {\n#       text: \"湛江 234181\",\n#       city: \"湛江\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Specific coordinates\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      textScale: 2\n      dataSource:\n        - text: \"北京昌平 21348\"\n          coordinate:\n            - 116\n            - 40\n        - text: \"山东青岛 4242\"\n          coordinate:\n            - 119\n            - 35.5\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map text-scale=\"2\" id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"北京昌平 21348\",\n#       coordinate: [116, 40],\n#     },\n#     {\n#       text: \"山东青岛 4242\",\n#       coordinate: [119, 35.5],\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: data-view.china-map\ndisplayName: WrappedDataViewChinaMap\ndescription: 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签\ncategory: \"\"\nsource: \"@next-bricks/data-view\"\n---\n\n# data-view.china-map\n\n> 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签\n\n## Props\n\n| 属性       | 类型                      | 必填 | 默认值 | 说明                                                                   |\n| ---------- | ------------------------- | ---- | ------ | ---------------------------------------------------------------------- |\n| province   | `string \\| undefined`     | 否   | -      | 省份名称，例如\"广东\"。如果设置，则只显示该省份的地图，否则显示全国地图 |\n| dataSource | `DataItem[] \\| undefined` | 否   | -      | 数据源                                                                 |\n| maxScale   | `number \\| undefined`     | 否   | `1`    | 最大缩放比例                                                           |\n| textScale  | `number \\| undefined`     | 否   | `1`    | 标签文本缩放比例                                                       |\n\n## Examples\n\n### Basic\n\n展示带省份标签的全国地图。\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      dataSource:\n        - text: \"西藏 12311\"\n          province: 西藏\n        - text: \"四川 89781169\"\n          province: 四川\n        - text: \"台湾 234181\"\n          province: 台湾\n        - text: \"江西 21348\"\n          province: 江西\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"西藏 12311\",\n#       province: \"西藏\",\n#     },\n#     {\n#       text: \"四川 89781169\",\n#       province: \"四川\",\n#     },\n#     {\n#       text: \"台湾 234181\",\n#       province: \"台湾\",\n#     },\n#     {\n#       text: \"江西 21348\",\n#       province: \"江西\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Province map\n\n展示指定省份的地图并标注城市标签。\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      province: 广东\n      dataSource:\n        - text: \"广州 12311\"\n          city: 广州\n        - text: \"深圳 89781169\"\n          city: 深圳\n        - text: \"湛江 234181\"\n          city: 湛江\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map province=\"广东\" id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"广州 12311\",\n#       city: \"广州\",\n#     },\n#     {\n#       text: \"深圳 89781169\",\n#       city: \"深圳\",\n#     },\n#     {\n#       text: \"湛江 234181\",\n#       city: \"湛江\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Specific coordinates\n\n通过手动指定经纬度来精确定位标签位置。\n\n```yaml preview height=\"600px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 4em)\n    position: relative\nchildren:\n  - brick: data-view.china-map\n    properties:\n      textScale: 2\n      dataSource:\n        - text: \"北京昌平 21348\"\n          coordinate:\n            - 116\n            - 40\n        - text: \"山东青岛 4242\"\n          coordinate:\n            - 119\n            - 35.5\n    # Currently this brick only looks well within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 4em); position: relative\">\n#   <data-view.china-map text-scale=\"2\" id=\"brick-1\"></data-view.china-map>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       text: \"北京昌平 21348\",\n#       coordinate: [116, 40],\n#     },\n#     {\n#       text: \"山东青岛 4242\",\n#       coordinate: [119, 35.5],\n#     },\n#   ];\n# </script>\n# \n```\n"
   }
 }