@next-bricks/presentational 1.21.1 → 1.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/bricks.json +34 -34
  2. package/dist/chunks/3900.1314ea23.js +2 -0
  3. package/dist/chunks/3900.1314ea23.js.map +1 -0
  4. package/dist/chunks/eo-descriptions.75677ae9.js +3 -0
  5. package/dist/chunks/eo-descriptions.75677ae9.js.map +1 -0
  6. package/dist/chunks/{main.e70d2fce.js → main.47fe281a.js} +2 -2
  7. package/dist/chunks/{main.e70d2fce.js.map → main.47fe281a.js.map} +1 -1
  8. package/dist/examples.json +15 -15
  9. package/dist/{index.0205acd1.js → index.6e8a0692.js} +2 -2
  10. package/dist/{index.0205acd1.js.map → index.6e8a0692.js.map} +1 -1
  11. package/dist/manifest.json +291 -291
  12. package/dist/types.json +638 -638
  13. package/package.json +2 -2
  14. package/dist/chunks/3900.47f48f41.js +0 -2
  15. package/dist/chunks/3900.47f48f41.js.map +0 -1
  16. package/dist/chunks/eo-descriptions.84bd1dfe.js +0 -3
  17. package/dist/chunks/eo-descriptions.84bd1dfe.js.map +0 -1
  18. /package/dist/chunks/{eo-descriptions.84bd1dfe.js.LICENSE.txt → eo-descriptions.75677ae9.js.LICENSE.txt} +0 -0
package/dist/examples.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
- "eo-pagination": {
3
- "doc": "分页\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n total: 1000\n pageSize: 20\n page: 1\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination\n# total=\"1000\"\n# page-size=\"20\"\n# page=\"1\"\n# id=\"brick-1\"\n# ></eo-pagination>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### By token\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n type: token\n pageSize: 20\n nextToken: abc\n previousToken: def\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination\n# type=\"token\"\n# page-size=\"20\"\n# next-token=\"abc\"\n# previous-token=\"def\"\n# id=\"brick-1\"\n# ></eo-pagination>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
2
+ "eo-descriptions": {
3
+ "doc": "通用描述列表构件。\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# ];\n# </script>\n# \n```\n\n## Examples\n\n### Column\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n descriptionTitle: UserInfo\n column: 2\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n\n- brick: eo-divider\n properties:\n dividerStyle:\n margin: 8px 0 4px 0\n- brick: eo-descriptions\n properties:\n descriptionTitle: 用户信息\n column: 4\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions\n# description-title=\"UserInfo\"\n# column=\"2\"\n# id=\"brick-1\"\n# ></eo-descriptions>\n# <eo-divider id=\"brick-2\"></eo-divider>\n# <eo-descriptions\n# description-title=\"用户信息\"\n# column=\"4\"\n# id=\"brick-3\"\n# ></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.dividerStyle = {\n# margin: \"8px 0 4px 0\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Layout\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n layout: horizontal\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: eo-divider\n properties:\n dividerStyle:\n margin: 8px 0 4px 0\n- brick: eo-descriptions\n properties:\n layout: vertical\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: div\n properties:\n style:\n margin: 10px 0px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions layout=\"horizontal\" id=\"brick-1\"></eo-descriptions>\n# <eo-divider id=\"brick-2\"></eo-divider>\n# <eo-descriptions layout=\"vertical\" id=\"brick-3\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.dividerStyle = {\n# margin: \"8px 0 4px 0\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n bordered: true\n layout: vertical\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: div\n properties:\n style:\n margin: 10px 0px\n- brick: eo-descriptions\n properties:\n bordered: true\n layout: horizontal\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions bordered layout=\"vertical\" id=\"brick-1\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# <eo-descriptions bordered layout=\"horizontal\" id=\"brick-2\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Hide Groups\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n hideGroups: other\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n group: \"other\"\n - label: 标签\n group: \"other\"\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n\n- brick: div\n properties:\n style:\n margin: 10px 0px\n- brick: eo-descriptions\n properties:\n hideGroups:\n - name\n - other\n list:\n - label: 姓名\n text: Tom\n group: name\n - label: 年龄\n text: 18\n group: age\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n group: other\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# <eo-descriptions id=\"brick-2\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.hideGroups = \"other\";\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# group: \"other\",\n# },\n# {\n# label: \"标签\",\n# group: \"other\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.hideGroups = [\"name\", \"other\"];\n# brick_2.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# group: \"name\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# group: \"age\",\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# group: \"other\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### DataSource\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n dataSource:\n text: Hello world\n name: Tom\n list:\n - label: 姓名\n field: name\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: Form dataSource\n useBrick:\n brick: div\n properties:\n textContent: \"<% DATA.text %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = {\n# text: \"Hello world\",\n# name: \"Tom\",\n# };\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# field: \"name\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"Form dataSource\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# textContent: \"<% DATA.text %>\",\n# },\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n style:\n padding: 2em\n backgroundColor: \"#d8d8d8\"\nchildren:\n - brick: eo-descriptions\n properties:\n themeVariant: elevo\n column: 1\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-descriptions\n# theme-variant=\"elevo\"\n# column=\"1\"\n# id=\"brick-1\"\n# ></eo-descriptions>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# ];\n# </script>\n# \n```\n"
4
+ },
5
+ "eo-alert": {
6
+ "doc": "告警提示\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: div\nproperties:\n style:\n display: flex\n flex-direction: column\n gap: 10px\nslots:\n \"\":\n type: bricks\n bricks:\n - brick: eo-alert\n properties:\n textContent: 你好！欢迎使用EasyOps 2.0专业版，你可以根据自身需求添加业务模块。\n type: info\n closable: true\n - brick: eo-alert\n properties:\n textContent: 恭喜！你所提交的信息已经审核通过。\n type: success\n closable: true\n showIcon: true\n - brick: eo-alert\n properties:\n textContent: \"系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！\"\n type: warning\n closable: true\n showIcon: true\n - brick: eo-alert\n properties:\n textContent: 系统错误，请稍后重试。\n type: error\n closable: true\n showIcon: true\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 10px\">\n# <eo-alert closable id=\"brick-1\">\n# 你好！欢迎使用EasyOps 2.0专业版，你可以根据自身需求添加业务模块。\n# </eo-alert>\n# <eo-alert closable show-icon id=\"brick-2\"\n# >恭喜！你所提交的信息已经审核通过。</eo-alert\n# >\n# <eo-alert closable show-icon id=\"brick-3\">\n# 系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！\n# </eo-alert>\n# <eo-alert closable show-icon id=\"brick-4\">系统错误，请稍后重试。</eo-alert>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.type = \"info\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.type = \"success\";\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.type = \"warning\";\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.type = \"error\";\n# </script>\n# \n```\n\n### HasTitle\n\n```yaml preview\nbrick: div\nproperties:\n style:\n display: flex\n flex-direction: column\n gap: 10px\nslots:\n \"\":\n type: bricks\n bricks:\n - brick: eo-alert\n properties:\n textContent: 你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。\n type: info\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 帮助信息\n - brick: eo-alert\n properties:\n textContent: 你所提交的审核信息已全部通过审核，请及时跟进申请状况。\n type: success\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 已成功\n - brick: eo-alert\n properties:\n textContent: 你所提交的审核信息审核失败，可以进入个人信箱查看原因。如有疑问，请联系客服人员。\n type: warning\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 请注意\n - brick: eo-alert\n properties:\n textContent: 你的账户会员使用权限将在3天后到期，请及时跟进申请状况，如有疑问，请联系审核人员。\n type: error\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 出错了\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 10px\">\n# <eo-alert closable has-title show-icon id=\"brick-1\">\n# <div slot=\"title\">帮助信息</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-2\">\n# <div slot=\"title\">已成功</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-3\">\n# <div slot=\"title\">请注意</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-4\">\n# <div slot=\"title\">出错了</div>\n# </eo-alert>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.type = \"info\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.type = \"success\";\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.type = \"warning\";\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.type = \"error\";\n# </script>\n# \n```\n"
4
7
  },
5
8
  "eo-card-item": {
6
9
  "doc": "信息类卡片 —— 通用卡片\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-card-item\nproperties:\n style:\n width: 300px\n hasHeader: true\n auxiliaryText: 初级应用\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#167be0\"\n size: 20\n bgColor: var(--theme-geekblue-background)\n actions:\n - icon:\n lib: antd\n theme: outlined\n icon: star\n isDropdown: false\n event: collect\n - icon:\n lib: antd\n icon: copy\n theme: outlined\n text: 复制链接\n isDropdown: true\n event: copy\n - icon:\n lib: antd\n icon: download\n theme: outlined\n text: 下载\n isDropdown: true\n disabled: true\n event: download\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 300px\"\n# has-header\n# auxiliary-text=\"初级应用\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.url = \"/test\";\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#167be0\",\n# size: 20,\n# bgColor: \"var(--theme-geekblue-background)\",\n# };\n# brick_1.actions = [\n# {\n# icon: {\n# lib: \"antd\",\n# theme: \"outlined\",\n# icon: \"star\",\n# },\n# isDropdown: false,\n# event: \"collect\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"copy\",\n# theme: \"outlined\",\n# },\n# text: \"复制链接\",\n# isDropdown: true,\n# event: \"copy\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"download\",\n# theme: \"outlined\",\n# },\n# text: \"下载\",\n# isDropdown: true,\n# disabled: true,\n# event: \"download\",\n# },\n# ];\n# </script>\n# \n```\n\n### showActions\n\n```yaml preview\nbrick: eo-card-item\nproperties:\n style:\n width: 300px\n hasHeader: true\n auxiliaryText: 初级应用\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#167be0\"\n size: 20\n bgColor: var(--theme-geekblue-background)\n actions:\n - icon:\n lib: antd\n theme: outlined\n icon: star\n isDropdown: false\n event: collect\n - icon:\n lib: antd\n icon: copy\n theme: outlined\n text: 复制链接\n isDropdown: true\n event: copy\n - icon:\n lib: antd\n icon: download\n theme: outlined\n text: 下载\n isDropdown: true\n disabled: true\n event: download\n showActions: hover\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 300px\"\n# has-header\n# auxiliary-text=\"初级应用\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# show-actions=\"hover\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#167be0\",\n# size: 20,\n# bgColor: \"var(--theme-geekblue-background)\",\n# };\n# brick_1.actions = [\n# {\n# icon: {\n# lib: \"antd\",\n# theme: \"outlined\",\n# icon: \"star\",\n# },\n# isDropdown: false,\n# event: \"collect\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"copy\",\n# theme: \"outlined\",\n# },\n# text: \"复制链接\",\n# isDropdown: true,\n# event: \"copy\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"download\",\n# theme: \"outlined\",\n# },\n# text: \"下载\",\n# isDropdown: true,\n# disabled: true,\n# event: \"download\",\n# },\n# ];\n# </script>\n# \n```\n\n### Single Expanded Area\n\n```yaml preview gap\n- brick: eo-card-item\n properties:\n style:\n width: 300px\n hasHeader: true\n auxiliaryText: 初级应用\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#167be0\"\n size: 20\n bgColor: var(--theme-geekblue-background)\n slots:\n expanded-area-1:\n type: bricks\n bricks:\n - brick: eo-tag-list\n properties:\n size: small\n list:\n - text: IT 资源管理\n key: IT_resource_management\n color: gray\n - text: 资源套餐\n key: resource_package\n color: gray\n - text: 存储设备\n key: storage_device\n color: gray\n- brick: eo-card-item\n properties:\n style:\n width: 300px\n hasHeader: true\n auxiliaryText: 初级应用\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#167be0\"\n size: 20\n bgColor: var(--theme-geekblue-background)\n slots:\n expanded-area-2:\n type: bricks\n bricks:\n - brick: eo-flex-layout\n properties:\n style:\n width: 100%\n justifyContent: space-between\n alignItems: center\n children:\n - brick: span\n properties:\n textContent: 张元 更新于 2 小时前\n style:\n color: var(--text-color-secondary)\n - brick: eo-switch\n properties:\n size: small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 300px\"\n# has-header\n# auxiliary-text=\"初级应用\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# >\n# <eo-tag-list\n# slot=\"expanded-area-1\"\n# size=\"small\"\n# list=\"[object Object],[object Object],[object Object]\"\n# ></eo-tag-list>\n# </eo-card-item>\n# <eo-card-item\n# style=\"width: 300px\"\n# has-header\n# auxiliary-text=\"初级应用\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-2\"\n# >\n# <eo-flex-layout\n# slot=\"expanded-area-2\"\n# style=\"width: 100%\"\n# justify-content=\"space-between\"\n# align-items=\"center\"\n# >\n# <span style=\"color: var(--text-color-secondary)\">张元 更新于 2 小时前</span>\n# <eo-switch size=\"small\"></eo-switch>\n# </eo-flex-layout>\n# </eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#167be0\",\n# size: 20,\n# bgColor: \"var(--theme-geekblue-background)\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#167be0\",\n# size: 20,\n# bgColor: \"var(--theme-geekblue-background)\",\n# };\n# </script>\n# \n```\n\n### Multiple Expanded Area\n\n```yaml preview gap\n- brick: eo-card-item\n properties:\n style:\n width: 300px\n hasHeader: true\n auxiliaryText: 初级应用\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#167be0\"\n size: 20\n bgColor: var(--theme-geekblue-background)\n slots:\n title-suffix:\n type: bricks\n bricks:\n - brick: eo-tag\n properties:\n textContent: 已启用\n color: green\n expanded-area-1:\n type: bricks\n bricks:\n - brick: eo-tag-list\n properties:\n size: small\n list:\n - text: IT 资源管理\n key: IT_resource_management\n color: gray\n - text: 资源套餐\n key: resource_package\n color: gray\n - text: 存储设备\n key: storage_device\n color: gray\n expanded-area-2:\n type: bricks\n bricks:\n - brick: eo-flex-layout\n properties:\n style:\n width: 100%\n justifyContent: space-between\n alignItems: center\n children:\n - brick: span\n properties:\n textContent: 张元 更新于 2 小时前\n style:\n color: var(--text-color-secondary)\n - brick: eo-switch\n properties:\n size: small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 300px\"\n# has-header\n# auxiliary-text=\"初级应用\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# >\n# <eo-tag slot=\"title-suffix\" color=\"green\">已启用</eo-tag>\n# <eo-tag-list\n# slot=\"expanded-area-1\"\n# size=\"small\"\n# list=\"[object Object],[object Object],[object Object]\"\n# ></eo-tag-list>\n# <eo-flex-layout\n# slot=\"expanded-area-2\"\n# style=\"width: 100%\"\n# justify-content=\"space-between\"\n# align-items=\"center\"\n# >\n# <span style=\"color: var(--text-color-secondary)\">张元 更新于 2 小时前</span>\n# <eo-switch size=\"small\"></eo-switch>\n# </eo-flex-layout>\n# </eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#167be0\",\n# size: 20,\n# bgColor: \"var(--theme-geekblue-background)\",\n# };\n# </script>\n# \n```\n\n### Cover\n\n```yaml preview\n- brick: eo-card-item\n properties:\n style:\n width: 280px\n hasCover: true\n coverImage: https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png\n cardTitle: 信息卡片\n description: 这是一只可爱的北极熊\n url: /test\n target: _blank\n- brick: eo-card-item\n properties:\n style:\n width: 280px\n hasCover: true\n coverColor: \"#167be0\"\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n avatarPosition: cover\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n color: \"#fff\"\n actions:\n - icon:\n lib: antd\n theme: outlined\n icon: star\n startColor: \"#fff\"\n endColor: \"#fff\"\n isDropdown: false\n event: collect\n - icon:\n lib: antd\n icon: copy\n theme: outlined\n text: 复制链接\n isDropdown: true\n event: copy\n - icon:\n lib: antd\n icon: download\n theme: outlined\n text: 下载\n isDropdown: true\n disabled: true\n event: download\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 280px\"\n# has-cover\n# card-title=\"信息卡片\"\n# description=\"这是一只可爱的北极熊\"\n# target=\"_blank\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# style=\"width: 280px\"\n# has-cover\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# avatar-position=\"cover\"\n# id=\"brick-2\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.coverImage =\n# \"https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png\";\n# brick_1.url = \"/test\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.coverColor = \"#167be0\";\n# brick_2.url = \"/test\";\n# brick_2.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# color: \"#fff\",\n# };\n# brick_2.actions = [\n# {\n# icon: {\n# lib: \"antd\",\n# theme: \"outlined\",\n# icon: \"star\",\n# startColor: \"#fff\",\n# endColor: \"#fff\",\n# },\n# isDropdown: false,\n# event: \"collect\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"copy\",\n# theme: \"outlined\",\n# },\n# text: \"复制链接\",\n# isDropdown: true,\n# event: \"copy\",\n# },\n# {\n# icon: {\n# lib: \"antd\",\n# icon: \"download\",\n# theme: \"outlined\",\n# },\n# text: \"下载\",\n# isDropdown: true,\n# disabled: true,\n# event: \"download\",\n# },\n# ];\n# </script>\n# \n```\n\n### avatarPlacement\n\n```yaml preview\nbrick: eo-card-item\nproperties:\n avatarPlacement: title-left\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# avatar-placement=\"title-left\"\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.url = \"/test\";\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# };\n# </script>\n# \n```\n\n### selected\n\n```yaml preview\n- brick: eo-card-item\n properties:\n selected: true\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n- brick: eo-card-item\n properties:\n styleType: grayish\n selected: true\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# selected\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# style-type=\"grayish\"\n# selected\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-2\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# </script>\n# \n```\n\n### borderColor\n\n```yaml preview\n- brick: eo-card-item\n properties:\n borderColor: blue\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n- brick: eo-card-item\n properties:\n borderColor: blue\n selected: true\n style:\n marginTop: 8px\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# border-color=\"blue\"\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# border-color=\"blue\"\n# selected\n# style=\"margin-top: 8px; width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-2\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# </script>\n# \n```\n\n### Tag\n\n```yaml preview\n- brick: div\n properties:\n textContent: Text Tag\n style:\n marginBottom: 10px\n- brick: eo-grid-layout\n properties:\n gap: 16px\n columns: 4\n children:\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 禁用\n bgColor: gray\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 蓝色\n bgColor: blue\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 绿色\n bgColor: green\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 黄色\n bgColor: yellow\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 红色\n bgColor: red\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 青色\n bgColor: cyan\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 灰蓝色\n bgColor: grayblue\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 紫色\n bgColor: purple\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n - brick: eo-card-item\n properties:\n tagConfig:\n text: 自定义\n bgColor: \"rgb(228 236 183)\"\n color: \"#000\"\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n- brick: div\n properties:\n textContent: Icon Tag\n style:\n margin: 10px\n- brick: eo-grid-layout\n properties:\n gap: 16px\n columns: 4\n children:\n - brick: eo-card-item\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: info-circle\n theme: outlined\n bgColor: blue\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n - brick: eo-card-item\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: check-circle\n theme: outlined\n bgColor: green\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n - brick: eo-card-item\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: info-circle\n theme: outlined\n bgColor: yellow\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n - brick: eo-card-item\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: close-circle\n theme: outlined\n bgColor: red\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n - brick: eo-card-item\n events:\n tag.click:\n - action: message.success\n args:\n - 收藏成功\n - target: _self\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: star\n theme: filled\n startColor: yellow\n endColor: yellow\n bgColor: blue\n properties:\n tagConfig:\n icon:\n lib: antd\n icon: star\n theme: filled\n bgColor: blue\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"margin-bottom: 10px\">Text Tag</div>\n# <eo-grid-layout gap=\"16px\" columns=\"4\">\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-2\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-3\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-4\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-5\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-6\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-7\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-8\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-9\"\n# ></eo-card-item>\n# </eo-grid-layout>\n# <div style=\"margin: 10px\">Icon Tag</div>\n# <eo-grid-layout gap=\"16px\" columns=\"4\">\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-10\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-11\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-12\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-13\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-14\"\n# ></eo-card-item>\n# </eo-grid-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.tagConfig = {\n# text: \"禁用\",\n# bgColor: \"gray\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.tagConfig = {\n# text: \"蓝色\",\n# bgColor: \"blue\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.tagConfig = {\n# text: \"绿色\",\n# bgColor: \"green\",\n# };\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.tagConfig = {\n# text: \"黄色\",\n# bgColor: \"yellow\",\n# };\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.tagConfig = {\n# text: \"红色\",\n# bgColor: \"red\",\n# };\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.tagConfig = {\n# text: \"青色\",\n# bgColor: \"cyan\",\n# };\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.tagConfig = {\n# text: \"灰蓝色\",\n# bgColor: \"grayblue\",\n# };\n# \n# const brick_8 = document.getElementById(\"brick-8\");\n# brick_8.tagConfig = {\n# text: \"紫色\",\n# bgColor: \"purple\",\n# };\n# \n# const brick_9 = document.getElementById(\"brick-9\");\n# brick_9.tagConfig = {\n# text: \"自定义\",\n# bgColor: \"rgb(228 236 183)\",\n# color: \"#000\",\n# };\n# \n# const brick_10 = document.getElementById(\"brick-10\");\n# brick_10.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"info-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"blue\",\n# };\n# brick_10.url = \"/test\";\n# \n# const brick_11 = document.getElementById(\"brick-11\");\n# brick_11.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"check-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"green\",\n# };\n# brick_11.url = \"/test\";\n# \n# const brick_12 = document.getElementById(\"brick-12\");\n# brick_12.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"info-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"yellow\",\n# };\n# brick_12.url = \"/test\";\n# \n# const brick_13 = document.getElementById(\"brick-13\");\n# brick_13.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"close-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"red\",\n# };\n# brick_13.url = \"/test\";\n# \n# const brick_14 = document.getElementById(\"brick-14\");\n# brick_14.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"star\",\n# theme: \"filled\",\n# },\n# bgColor: \"blue\",\n# };\n# brick_14.url = \"/test\";\n# brick_14.addEventListener(\"tag.click\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"收藏成功\" });\n# });\n# brick_14.addEventListener(\"tag.click\", (e) => {\n# const brick = e.target;\n# brick.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"star\",\n# theme: \"filled\",\n# startColor: \"yellow\",\n# endColor: \"yellow\",\n# },\n# bgColor: \"blue\",\n# };\n# });\n# </script>\n# \n```\n\n### Style type\n\n```yaml preview\nbrick: eo-card-item\nproperties:\n styleType: grayish\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n url: /test\n target: _blank\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style-type=\"grayish\"\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.url = \"/test\";\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# </script>\n# \n```\n\n### stacked\n\n```yaml preview\n- brick: eo-card-item\n properties:\n stacked: true\n style:\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n- brick: eo-card-item\n properties:\n stacked: true\n styleType: grayish\n style:\n marginTop: 18px\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n- brick: eo-card-item\n properties:\n stacked: true\n borderColor: blue\n style:\n marginTop: 18px\n width: 300px\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n avatar:\n icon:\n lib: easyops\n category: default\n icon: monitor\n size: 20\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# stacked\n# style=\"width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# stacked\n# style-type=\"grayish\"\n# style=\"margin-top: 18px; width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-2\"\n# ></eo-card-item>\n# <eo-card-item\n# stacked\n# border-color=\"blue\"\n# style=\"margin-top: 18px; width: 300px\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-3\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.avatar = {\n# icon: {\n# lib: \"easyops\",\n# category: \"default\",\n# icon: \"monitor\",\n# },\n# size: 20,\n# };\n# </script>\n# \n```\n\n### cardStyle\n\n```yaml preview\n- brick: eo-card-item\n properties:\n style:\n width: 280px\n cardStyle:\n backgroundColor: var(--palette-gray-blue-6)\n cardTitle: 信息卡片\n description: 这是一只可爱的北极熊\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 280px\"\n# card-title=\"信息卡片\"\n# description=\"这是一只可爱的北极熊\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardStyle = {\n# backgroundColor: \"var(--palette-gray-blue-6)\",\n# };\n# </script>\n# \n```\n"
7
10
  },
8
- "eo-divider": {
9
- "doc": "分割线构件 `eo-divider`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-divider\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider></eo-divider>\n# \n```\n\n### orientation\n\n```yaml preview\n- brick: eo-divider\n properties:\n orientation: left\n textContent: 基本\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider id=\"brick-1\">基本</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.orientation = \"left\";\n# </script>\n# \n```\n\n### 虚线 dashed\n\n```yaml preview\n- brick: eo-divider\n properties:\n orientation: center\n textContent: 基本\n dashed: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider dashed id=\"brick-1\">基本</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.orientation = \"center\";\n# </script>\n# \n```\n\n### type vertical\n\n```yaml preview\n- brick: span\n properties:\n textContent: span1\n- brick: eo-divider\n properties:\n type: vertical\n- brick: span\n properties:\n textContent: span2\n# -- YAML DELIMITER (1nbbm8) --\n# <span>span1</span>\n# <eo-divider type=\"vertical\"></eo-divider>\n# <span>span2</span>\n# \n```\n\n### type radiation\n\n```yaml preview\n- brick: eo-divider\n properties:\n type: radiation\n textContent: 标题\n proportion:\n - 0\n - 3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider type=\"radiation\" id=\"brick-1\">标题</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.proportion = [0, 3];\n# </script>\n# \n```\n"
10
- },
11
- "eo-info-card-item": {
12
- "doc": "构件 `eo-info-card-item`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 持续集成\n cardIcon:\n color: green\n icon:\n icon: object-topology\n lib: easyops\n category: app\n bgColor: var(--theme-green-background)\n description: 支持展客户两会话健康和空间和健康和健康和健康几节课或军扩过过过过科技股科技股就开始刚开始搞是接口关键时刻哥萨克伽伽司空见惯撒十多个数据库高升控股撒奥会计噶会计师公开撒娇鬼萨科技馆萨科技会计师干撒冈萨加国盛金控hhhhhhhhhhhhh\n detailList:\n - useBrick:\n brick: eo-tag\n properties:\n textContent: IT资源管理\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n - useBrick:\n brick: eo-tag\n properties:\n textContent: 存储设备\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n - useBrick:\n brick: eo-tag\n properties:\n textContent: 资源套餐\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n slots:\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n color: red\n size: small\n properties:\n actions:\n - text: 高级设置\n color: red\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n danger: true\n color: var(--theme-red-color)\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 资产盘点\n cardIcon:\n color: orange\n icon:\n icon: patch-management\n lib: easyops\n category: app\n description: 资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点，解放设备运维人员的双手\n detailList:\n - desc: 7M\n title: 大小\n - desc: \"863\"\n title: 下载次数\n - desc: 80%\n title: 下载率\n - desc: 2%\n title: 失败率\n slots:\n title:\n type: bricks\n bricks:\n - brick: eo-tag\n properties:\n textContent: 生产\n color: blue\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n color: red\n size: small\n properties:\n actions:\n - text: 高级设置\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n color: var(--theme-red-color)\n danger: true\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 资源监控微应用\n cardIcon:\n color: blue\n icon:\n icon: chart-pie\n lib: fa\n description: F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态，了解 VirtualServer、Pool、iRules资源信息\n detailList:\n - useBrick:\n brick: eo-switch\n properties:\n name: enabled\n size: small\n style:\n marginTop: \"-2.5px\"\n value: true\n title: 是否启用\n - desc: \"7663\"\n title: 下载次数\n - desc: 90%\n title: 下载率\n - desc: 3%\n title: 失败率\n slots:\n title:\n type: bricks\n bricks:\n - brick: eo-tag\n properties:\n textContent: 测试\n color: green\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n size: small\n properties:\n actions:\n - text: 高级设置\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n danger: true\n color: var(--theme-red-color)\n- brick: div\n properties:\n style:\n height: 50px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"持续集成\"\n# description=\"支持展客户两会话健康和空间和健康和健康和健康几节课或军扩过过过过科技股科技股就开始刚开始搞是接口关键时刻哥萨克伽伽司空见惯撒十多个数据库高升控股撒奥会计噶会计师公开撒娇鬼萨科技馆萨科技会计师干撒冈萨加国盛金控hhhhhhhhhhhhh\"\n# id=\"brick-1\"\n# >\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-2\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 20px\"></div>\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资产盘点\"\n# description=\"资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点，解放设备运维人员的双手\"\n# id=\"brick-3\"\n# >\n# <eo-tag slot=\"title\" color=\"blue\">生产</eo-tag>\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-4\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 20px\"></div>\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资源监控微应用\"\n# description=\"F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态，了解 VirtualServer、Pool、iRules资源信息\"\n# id=\"brick-5\"\n# >\n# <eo-tag slot=\"title\" color=\"green\">测试</eo-tag>\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-6\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 50px\"></div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardIcon = {\n# color: \"green\",\n# icon: {\n# icon: \"object-topology\",\n# lib: \"easyops\",\n# category: \"app\",\n# },\n# bgColor: \"var(--theme-green-background)\",\n# };\n# brick_1.detailList = [\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"IT资源管理\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"存储设备\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"资源套餐\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_2.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.cardIcon = {\n# color: \"orange\",\n# icon: {\n# icon: \"patch-management\",\n# lib: \"easyops\",\n# category: \"app\",\n# },\n# };\n# brick_3.detailList = [\n# {\n# desc: \"7M\",\n# title: \"大小\",\n# },\n# {\n# desc: \"863\",\n# title: \"下载次数\",\n# },\n# {\n# desc: \"80%\",\n# title: \"下载率\",\n# },\n# {\n# desc: \"2%\",\n# title: \"失败率\",\n# },\n# ];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_4.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.cardIcon = {\n# color: \"blue\",\n# icon: {\n# icon: \"chart-pie\",\n# lib: \"fa\",\n# },\n# };\n# brick_5.detailList = [\n# {\n# useBrick: {\n# brick: \"eo-switch\",\n# properties: {\n# name: \"enabled\",\n# size: \"small\",\n# style: {\n# marginTop: \"-2.5px\",\n# },\n# value: true,\n# },\n# },\n# title: \"是否启用\",\n# },\n# {\n# desc: \"7663\",\n# title: \"下载次数\",\n# },\n# {\n# desc: \"90%\",\n# title: \"下载率\",\n# },\n# {\n# desc: \"3%\",\n# title: \"失败率\",\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_6.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# </script>\n# \n```\n"
11
+ "eo-pagination": {
12
+ "doc": "分页\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n total: 1000\n pageSize: 20\n page: 1\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination\n# total=\"1000\"\n# page-size=\"20\"\n# page=\"1\"\n# id=\"brick-1\"\n# ></eo-pagination>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### By token\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n type: token\n pageSize: 20\n nextToken: abc\n previousToken: def\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination\n# type=\"token\"\n# page-size=\"20\"\n# next-token=\"abc\"\n# previous-token=\"def\"\n# id=\"brick-1\"\n# ></eo-pagination>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
13
13
  },
14
14
  "eo-code-display": {
15
15
  "doc": "代码展示\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-code-display\n properties:\n language: javascript\n value: |\n function onSubmit (e) {\n const fn = () => 123;\n const job = {\n title: 'Developer',\n company: 'Facebook'\n };\n }\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-display\n# language=\"javascript\"\n# value=\"function onSubmit (e) {\n# const fn = () =&gt; 123;\n# const job = {\n# title: 'Developer',\n# company: 'Facebook'\n# };\n# }\n# \"\n# ></eo-code-display>\n# \n```\n"
16
16
  },
17
- "eo-humanize-time": {
18
- "doc": "人性化时间展示\n\n## Examples\n\n### 完整\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 精确\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: accurate\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"accurate\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 相对\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: relative\n isMillisecond: true\n value: 1714026348000\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time is-millisecond id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"relative\";\n# brick_1.value = 1714026348000;\n# </script>\n# \n```\n\n### 耗时\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: relative\n isCostTime: true\n value: 1000\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time is-cost-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"relative\";\n# brick_1.value = 1000;\n# </script>\n# \n```\n\n### 链接\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n link:\n target: _blank\n url: /aaa/bbb\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.link = {\n# target: \"_blank\",\n# url: \"/aaa/bbb\",\n# };\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 自定义格式\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n inputFormat: YYYY-MM-DD\n outputFormat: LLL\n value: \"2020-02-27 16:36\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time\n# input-format=\"YYYY-MM-DD\"\n# output-format=\"LLL\"\n# id=\"brick-1\"\n# ></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"2020-02-27 16:36\";\n# </script>\n# \n```\n\n### 仅日期\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n type: date\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time type=\"date\" id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n"
17
+ "eo-info-card-item": {
18
+ "doc": "构件 `eo-info-card-item`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 持续集成\n cardIcon:\n color: green\n icon:\n icon: object-topology\n lib: easyops\n category: app\n bgColor: var(--theme-green-background)\n description: 支持展客户两会话健康和空间和健康和健康和健康几节课或军扩过过过过科技股科技股就开始刚开始搞是接口关键时刻哥萨克伽伽司空见惯撒十多个数据库高升控股撒奥会计噶会计师公开撒娇鬼萨科技馆萨科技会计师干撒冈萨加国盛金控hhhhhhhhhhhhh\n detailList:\n - useBrick:\n brick: eo-tag\n properties:\n textContent: IT资源管理\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n - useBrick:\n brick: eo-tag\n properties:\n textContent: 存储设备\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n - useBrick:\n brick: eo-tag\n properties:\n textContent: 资源套餐\n tagStyle:\n borderRadius: 3px\n lineHeight: 32px\n slots:\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n color: red\n size: small\n properties:\n actions:\n - text: 高级设置\n color: red\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n danger: true\n color: var(--theme-red-color)\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 资产盘点\n cardIcon:\n color: orange\n icon:\n icon: patch-management\n lib: easyops\n category: app\n description: 资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点，解放设备运维人员的双手\n detailList:\n - desc: 7M\n title: 大小\n - desc: \"863\"\n title: 下载次数\n - desc: 80%\n title: 下载率\n - desc: 2%\n title: 失败率\n slots:\n title:\n type: bricks\n bricks:\n - brick: eo-tag\n properties:\n textContent: 生产\n color: blue\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n color: red\n size: small\n properties:\n actions:\n - text: 高级设置\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n color: var(--theme-red-color)\n danger: true\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 资源监控微应用\n cardIcon:\n color: blue\n icon:\n icon: chart-pie\n lib: fa\n description: F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态，了解 VirtualServer、Pool、iRules资源信息\n detailList:\n - useBrick:\n brick: eo-switch\n properties:\n name: enabled\n size: small\n style:\n marginTop: \"-2.5px\"\n value: true\n title: 是否启用\n - desc: \"7663\"\n title: 下载次数\n - desc: 90%\n title: 下载率\n - desc: 3%\n title: 失败率\n slots:\n title:\n type: bricks\n bricks:\n - brick: eo-tag\n properties:\n textContent: 测试\n color: green\n action:\n type: bricks\n bricks:\n - brick: eo-dropdown-actions\n events:\n advanced.setting:\n - action: message.success\n args:\n - click advanced button\n button.delete:\n - useProvider: basic.show-dialog\n args:\n - type: confirm\n title: Please Confirm\n content: Are you sure?\n callback:\n success:\n action: message.success\n args:\n - You just confirmed!\n error:\n action: message.warn\n args:\n - You just canceled.\n children:\n - brick: eo-button\n properties:\n type: text\n icon:\n lib: fa\n icon: ellipsis-h\n size: small\n properties:\n actions:\n - text: 高级设置\n icon:\n icon: setting\n lib: antd\n event: advanced.setting\n - text: 删除\n icon:\n lib: antd\n icon: delete\n event: button.delete\n tooltip: 删除\n tooltipPlacement: right\n danger: true\n color: var(--theme-red-color)\n- brick: div\n properties:\n style:\n height: 50px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"持续集成\"\n# description=\"支持展客户两会话健康和空间和健康和健康和健康几节课或军扩过过过过科技股科技股就开始刚开始搞是接口关键时刻哥萨克伽伽司空见惯撒十多个数据库高升控股撒奥会计噶会计师公开撒娇鬼萨科技馆萨科技会计师干撒冈萨加国盛金控hhhhhhhhhhhhh\"\n# id=\"brick-1\"\n# >\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-2\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 20px\"></div>\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资产盘点\"\n# description=\"资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点，解放设备运维人员的双手\"\n# id=\"brick-3\"\n# >\n# <eo-tag slot=\"title\" color=\"blue\">生产</eo-tag>\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-4\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 20px\"></div>\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资源监控微应用\"\n# description=\"F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态，了解 VirtualServer、Pool、iRules资源信息\"\n# id=\"brick-5\"\n# >\n# <eo-tag slot=\"title\" color=\"green\">测试</eo-tag>\n# <eo-dropdown-actions\n# slot=\"action\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-6\"\n# >\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# <div style=\"height: 50px\"></div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardIcon = {\n# color: \"green\",\n# icon: {\n# icon: \"object-topology\",\n# lib: \"easyops\",\n# category: \"app\",\n# },\n# bgColor: \"var(--theme-green-background)\",\n# };\n# brick_1.detailList = [\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"IT资源管理\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"存储设备\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"资源套餐\",\n# tagStyle: {\n# borderRadius: \"3px\",\n# lineHeight: \"32px\",\n# },\n# },\n# },\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_2.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.cardIcon = {\n# color: \"orange\",\n# icon: {\n# icon: \"patch-management\",\n# lib: \"easyops\",\n# category: \"app\",\n# },\n# };\n# brick_3.detailList = [\n# {\n# desc: \"7M\",\n# title: \"大小\",\n# },\n# {\n# desc: \"863\",\n# title: \"下载次数\",\n# },\n# {\n# desc: \"80%\",\n# title: \"下载率\",\n# },\n# {\n# desc: \"2%\",\n# title: \"失败率\",\n# },\n# ];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_4.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.cardIcon = {\n# color: \"blue\",\n# icon: {\n# icon: \"chart-pie\",\n# lib: \"fa\",\n# },\n# };\n# brick_5.detailList = [\n# {\n# useBrick: {\n# brick: \"eo-switch\",\n# properties: {\n# name: \"enabled\",\n# size: \"small\",\n# style: {\n# marginTop: \"-2.5px\",\n# },\n# value: true,\n# },\n# },\n# title: \"是否启用\",\n# },\n# {\n# desc: \"7663\",\n# title: \"下载次数\",\n# },\n# {\n# desc: \"90%\",\n# title: \"下载率\",\n# },\n# {\n# desc: \"3%\",\n# title: \"失败率\",\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.addEventListener(\"advanced.setting\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"click advanced button\" });\n# });\n# brick_6.addEventListener(\"button.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"confirm\",\n# title: \"Please Confirm\",\n# content: \"Are you sure?\",\n# })\n# );\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"You just confirmed!\" });\n# });\n# promise.catch((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"warn\", message: \"You just canceled.\" });\n# });\n# });\n# </script>\n# \n```\n"
19
19
  },
20
- "eo-statistics-card": {
21
- "doc": "统计卡片\n\n## Examples\n\n### Basic\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n children:\n - brick: eo-tooltip\n slot: titleSuffix\n properties:\n content: 安全评分是根据您的资产状态进行的评分\n trigger: hover\n placement: top-start\n children:\n - brick: eo-icon\n properties:\n lib: antd\n icon: question-circle\n theme: outlined\n style:\n font-size: 12px\n color: var(--text-color-secondary)\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# >\n# <eo-tooltip\n# slot=\"titleSuffix\"\n# content=\"安全评分是根据您的资产状态进行的评分\"\n# trigger=\"hover\"\n# placement=\"top-start\"\n# >\n# <eo-icon\n# lib=\"antd\"\n# icon=\"question-circle\"\n# theme=\"outlined\"\n# style=\"font-size: 12px; color: var(--text-color-secondary)\"\n# ></eo-icon>\n# </eo-tooltip>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Outline\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: border\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: background\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: none\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"border\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"background\"\n# style=\"width: 300px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"none\"\n# style=\"width: 300px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: large\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: medium\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: small\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"large\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"medium\"\n# style=\"width: 300px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"small\"\n# style=\"width: 300px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Overview card\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\n cardTitle: 事件响应率\n value: <% PIPES.unitFormat(0.783, \"percent(1)\", 2)[0] %>\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#FEF3EC\"\n color: \"#F89B64\"\nchildren:\n - brick: div\n slot: description\n children:\n - brick: span\n properties:\n textContent: 同比上周\n - brick: span\n properties:\n style:\n color: var(--color-success)\n textContent: \"上升3.45%\"\n - brick: chart-v2.tiny-line-chart\n slot: basicContent\n properties:\n data:\n - month: Jan\n temperature: 3.9\n - month: Feb\n temperature: 4.2\n - month: Mar\n temperature: 5.7\n - month: Apr\n temperature: 8.5\n - month: May\n temperature: 11.9\n - month: Jun\n temperature: 15.2\n - month: Jul\n temperature: 17\n - month: Aug\n temperature: 16.6\n - month: Sep\n temperature: 10.2\n - month: Oct\n temperature: 10.3\n - month: Nov\n temperature: 6.6\n - month: Dec\n temperature: 4.8\n width: 200px\n height: 60px\n xField: month\n yField: temperature\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件响应率\"\n# value='&lt;% PIPES.unitFormat(0.783, \"percent(1)\", 2)[0] %&gt;'\n# id=\"brick-1\"\n# >\n# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升3.45%</span>\n# </div>\n# <chart-v2.tiny-line-chart\n# slot=\"basicContent\"\n# data=\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\"\n# width=\"200px\"\n# height=\"60px\"\n# x-field=\"month\"\n# y-field=\"temperature\"\n# ></chart-v2.tiny-line-chart>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#FEF3EC\",\n# color: \"#F89B64\",\n# };\n# </script>\n# \n```\n\n### Complex usage\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\n cardTitle: 事件响应数量\n value: 4,089\n descriptionPosition: right\n style:\n width: 500px\nchildren:\n - brick: eo-icon\n slot: titlePrefix\n properties:\n lib: antd\n icon: check-circle\n theme: filled\n style:\n font-size: 12px\n color: var(--color-success)\n - brick: div\n slot: description\n children:\n - brick: span\n properties:\n textContent: 同比上周\n - brick: span\n properties:\n style:\n color: var(--color-success)\n textContent: \"上升31.45%\"\n - brick: chart-v2.time-series-chart\n slot: extraContent\n properties:\n axis:\n yAxis:\n precision: 2\n data:\n - host_load_5_per_core: 3.95\n time: 1626600960\n - host_load_5_per_core: 3.88\n time: 1626601020\n - host_load_5_per_core: 3.91\n time: 1626601080\n - host_load_5_per_core: 4\n time: 1626601140\n - host_load_5_per_core: 4.08\n time: 1626601200\n - host_load_5_per_core: 3.91\n time: 1626601260\n - host_load_5_per_core: 3.92\n time: 1626601320\n - host_load_5_per_core: 3.81\n time: 1626601380\n - host_load_5_per_core: 3.93\n time: 1626601440\n - host_load_5_per_core: 3.9\n time: 1626601500\n - host_load_5_per_core: 3.9\n time: 1626601560\n - host_load_5_per_core: 3.8\n time: 1626601620\n - host_load_5_per_core: 3.74\n time: 1626601680\n - host_load_5_per_core: 4.16\n time: 1626601740\n - host_load_5_per_core: 4.12\n time: 1626601800\n - host_load_5_per_core: 4.08\n time: 1626601860\n - host_load_5_per_core: 3.98\n time: 1626601920\n - host_load_5_per_core: 3.79\n time: 1626601980\n - host_load_5_per_core: 3.65\n time: 1626602040\n - host_load_5_per_core: 3.83\n time: 1626602100\n - host_load_5_per_core: 3.7\n time: 1626602160\n - host_load_5_per_core: 3.69\n time: 1626602220\n - host_load_5_per_core: 3.81\n time: 1626602280\n - host_load_5_per_core: 3.81\n time: 1626602340\n - host_load_5_per_core: 3.87\n time: 1626602400\n - host_load_5_per_core: 4.07\n time: 1626602460\n - host_load_5_per_core: 4.02\n time: 1626602520\n - host_load_5_per_core: 4\n time: 1626602580\n - host_load_5_per_core: 3.91\n time: 1626602640\n - host_load_5_per_core: 3.82\n time: 1626602700\n - host_load_5_per_core: 3.76\n time: 1626602760\n - host_load_5_per_core: 3.75\n time: 1626602820\n - host_load_5_per_core: 3.7\n time: 1626602880\n - host_load_5_per_core: 3.86\n time: 1626602940\n - host_load_5_per_core: 3.97\n time: 1626603000\n - host_load_5_per_core: 3.8\n time: 1626603060\n - host_load_5_per_core: 3.91\n time: 1626603120\n - host_load_5_per_core: 3.92\n time: 1626603180\n - host_load_5_per_core: 3.92\n time: 1626603240\n - host_load_5_per_core: 4.03\n time: 1626603300\n - host_load_5_per_core: 4.05\n time: 1626603360\n - host_load_5_per_core: 3.98\n time: 1626603420\n - host_load_5_per_core: 4.26\n time: 1626603480\n - host_load_5_per_core: 4.59\n time: 1626603540\n - host_load_5_per_core: 4.59\n time: 1626603600\n - host_load_5_per_core: 4.45\n time: 1626603660\n - host_load_5_per_core: 4.41\n time: 1626603720\n - host_load_5_per_core: 4.37\n time: 1626603780\n - host_load_5_per_core: 4.17\n time: 1626603840\n - host_load_5_per_core: 4.41\n time: 1626603900\n - host_load_5_per_core: 4.36\n time: 1626603960\n - host_load_5_per_core: 4.25\n time: 1626604020\n - host_load_5_per_core: 4.37\n time: 1626604080\n - host_load_5_per_core: 4.33\n time: 1626604140\n - host_load_5_per_core: 4.43\n time: 1626604200\n - host_load_5_per_core: 4.48\n time: 1626604260\n - host_load_5_per_core: 4.42\n time: 1626604320\n - host_load_5_per_core: 4.55\n time: 1626604380\n - host_load_5_per_core: 4.64\n time: 1626604440\n - host_load_5_per_core: 4.68\n time: 1626604500\n - host_load_5_per_core: 4.67\n time: 1626604560\n - host_load_5_per_core: 4.75\n time: 1626604620\n - host_load_5_per_core: 4.62\n time: 1626604680\n - host_load_5_per_core: 4.95\n time: 1626604740\n - host_load_5_per_core: 5.29\n time: 1626604800\n - host_load_5_per_core: 5.61\n time: 1626604860\n - host_load_5_per_core: 5.5\n time: 1626604920\n - host_load_5_per_core: 5.96\n time: 1626604980\n - host_load_5_per_core: 5.62\n time: 1626605040\n - host_load_5_per_core: 5.67\n time: 1626605100\n - host_load_5_per_core: 5.56\n time: 1626605160\n - host_load_5_per_core: 5.37\n time: 1626605220\n - host_load_5_per_core: 5.53\n time: 1626605280\n - host_load_5_per_core: 5.46\n time: 1626605340\n - host_load_5_per_core: 5.42\n time: 1626605400\n - host_load_5_per_core: 5.4\n time: 1626605460\n - host_load_5_per_core: 5.33\n time: 1626605520\n - host_load_5_per_core: 5.35\n time: 1626605580\n - host_load_5_per_core: 5.21\n time: 1626605640\n - host_load_5_per_core: 5.22\n time: 1626605700\n - host_load_5_per_core: 5.25\n time: 1626605760\n - host_load_5_per_core: 5.42\n time: 1626605820\n - host_load_5_per_core: 5.51\n time: 1626605880\n - host_load_5_per_core: 5.31\n time: 1626605940\n - host_load_5_per_core: 5.4\n time: 1626606000\n - host_load_5_per_core: 5.76\n time: 1626606060\n - host_load_5_per_core: 5.64\n time: 1626606120\n - host_load_5_per_core: 5.36\n time: 1626606180\n - host_load_5_per_core: 5.53\n time: 1626606240\n - host_load_5_per_core: 5.38\n time: 1626606300\n - host_load_5_per_core: 5.25\n time: 1626606360\n - host_load_5_per_core: 5.24\n time: 1626606420\n - host_load_5_per_core: 5.09\n time: 1626606480\n - host_load_5_per_core: 5.15\n time: 1626606540\n - host_load_5_per_core: 5.14\n time: 1626606600\n - host_load_5_per_core: 5.03\n time: 1626606660\n - host_load_5_per_core: 4.96\n time: 1626606720\n - host_load_5_per_core: 4.74\n time: 1626606780\n - host_load_5_per_core: 4.49\n time: 1626606840\n - host_load_5_per_core: 4.51\n time: 1626606900\n - host_load_5_per_core: 4.44\n time: 1626606960\n - host_load_5_per_core: 4.54\n time: 1626607020\n - host_load_5_per_core: 4.46\n time: 1626607080\n - host_load_5_per_core: 4.53\n time: 1626607140\n - host_load_5_per_core: 4.27\n time: 1626607200\n - host_load_5_per_core: 4.31\n time: 1626607260\n - host_load_5_per_core: 4.3\n time: 1626607320\n - host_load_5_per_core: 4.07\n time: 1626607380\n - host_load_5_per_core: 3.97\n time: 1626607440\n - host_load_5_per_core: 4.31\n time: 1626607500\n - host_load_5_per_core: 4.19\n time: 1626607560\n - host_load_5_per_core: 4.2\n time: 1626607620\n - host_load_5_per_core: 4.21\n time: 1626607680\n - host_load_5_per_core: 4.08\n time: 1626607740\n - host_load_5_per_core: 3.94\n time: 1626607800\n - host_load_5_per_core: 3.9\n time: 1626607860\n - host_load_5_per_core: 3.78\n time: 1626607920\n - host_load_5_per_core: 3.8\n time: 1626607980\n - host_load_5_per_core: 3.83\n time: 1626608040\n - host_load_5_per_core: 3.92\n time: 1626608100\n - host_load_5_per_core: 3.88\n time: 1626608160\n - host_load_5_per_core: 4.05\n time: 1626608220\n - host_load_5_per_core: 4.04\n time: 1626608280\n - host_load_5_per_core: 4.01\n time: 1626608340\n - host_load_5_per_core: 4.13\n time: 1626608400\n - host_load_5_per_core: 3.94\n time: 1626608460\n - host_load_5_per_core: 3.91\n time: 1626608520\n - host_load_5_per_core: 3.86\n time: 1626608580\n - host_load_5_per_core: 3.75\n time: 1626608640\n - host_load_5_per_core: 3.82\n time: 1626608700\n - host_load_5_per_core: 4\n time: 1626608760\n - host_load_5_per_core: 3.88\n time: 1626608820\n - host_load_5_per_core: 3.8\n time: 1626608880\n - host_load_5_per_core: 4.05\n time: 1626608940\n - host_load_5_per_core: 4.42\n time: 1626609000\n - host_load_5_per_core: 4.53\n time: 1626609060\n height: 200\n showPoint: false\n xField: time\n xRange:\n from: 1626601000\n step: 60\n to: 1626609200\n yField: host_load_5_per_core\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件响应数量\"\n# value=\"4,089\"\n# description-position=\"right\"\n# style=\"width: 500px\"\n# >\n# <eo-icon\n# slot=\"titlePrefix\"\n# lib=\"antd\"\n# icon=\"check-circle\"\n# theme=\"filled\"\n# style=\"font-size: 12px; color: var(--color-success)\"\n# ></eo-icon>\n# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升31.45%</span>\n# </div>\n# <chart-v2.time-series-chart\n# slot=\"extraContent\"\n# axis=\"[object Object]\"\n# data=\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\"\n# height=\"200\"\n# x-field=\"time\"\n# x-range=\"[object Object]\"\n# y-field=\"host_load_5_per_core\"\n# ></chart-v2.time-series-chart>\n# </eo-statistics-card>\n# \n```\n\n### Interaction\n\n#### Operator slot\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n children:\n - brick: eo-mini-actions\n slot: operator\n properties:\n actions:\n - icon:\n lib: antd\n icon: edit\n theme: outlined\n text: 编辑\n isDropdown: true\n event: edit\n - icon:\n lib: antd\n icon: delete\n theme: outlined\n text: 删除\n isDropdown: true\n disabled: true\n event: delete\n events:\n edit:\n - action: console.log\n delete:\n - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# >\n# <eo-mini-actions\n# slot=\"operator\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-2\"\n# ></eo-mini-actions>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"edit\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"delete\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### Whole card\n\n```yaml preview gap\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: border\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: background\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: none\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"border\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# </eo-link>\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"background\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# </eo-link>\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"none\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# </eo-link>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n"
20
+ "eo-divider": {
21
+ "doc": "分割线构件 `eo-divider`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-divider\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider></eo-divider>\n# \n```\n\n### orientation\n\n```yaml preview\n- brick: eo-divider\n properties:\n orientation: left\n textContent: 基本\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider id=\"brick-1\">基本</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.orientation = \"left\";\n# </script>\n# \n```\n\n### 虚线 dashed\n\n```yaml preview\n- brick: eo-divider\n properties:\n orientation: center\n textContent: 基本\n dashed: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider dashed id=\"brick-1\">基本</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.orientation = \"center\";\n# </script>\n# \n```\n\n### type vertical\n\n```yaml preview\n- brick: span\n properties:\n textContent: span1\n- brick: eo-divider\n properties:\n type: vertical\n- brick: span\n properties:\n textContent: span2\n# -- YAML DELIMITER (1nbbm8) --\n# <span>span1</span>\n# <eo-divider type=\"vertical\"></eo-divider>\n# <span>span2</span>\n# \n```\n\n### type radiation\n\n```yaml preview\n- brick: eo-divider\n properties:\n type: radiation\n textContent: 标题\n proportion:\n - 0\n - 3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider type=\"radiation\" id=\"brick-1\">标题</eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.proportion = [0, 3];\n# </script>\n# \n```\n"
22
22
  },
23
23
  "eo-loading-step": {
24
24
  "doc": "加载步骤框\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\nbrick: eo-loading-step\nproperties:\n visible: true\n stepTitle: 正在分析中\n curStep: second\n stepList:\n - title: 正在从事件中获取资源信息...\n key: first\n - title: 事件资源获取成功。\n key: second\n - title: 正在匹配资源详情页...\n key: third\n - title: 已为您匹配到最佳资源详情页。\n key: fourth\n - title: 即将前往基础设施监控, 请等待...\n key: fifth\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-loading-step\n# visible\n# step-title=\"正在分析中\"\n# cur-step=\"second\"\n# id=\"brick-1\"\n# ></eo-loading-step>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.stepList = [\n# {\n# title: \"正在从事件中获取资源信息...\",\n# key: \"first\",\n# },\n# {\n# title: \"事件资源获取成功。\",\n# key: \"second\",\n# },\n# {\n# title: \"正在匹配资源详情页...\",\n# key: \"third\",\n# },\n# {\n# title: \"已为您匹配到最佳资源详情页。\",\n# key: \"fourth\",\n# },\n# {\n# title: \"即将前往基础设施监控, 请等待...\",\n# key: \"fifth\",\n# },\n# ];\n# </script>\n# \n```\n"
@@ -32,10 +32,10 @@
32
32
  "eo-code-block": {
33
33
  "doc": "构件 `eo-code-block`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-code-block\nproperties:\n language: js\n source: |\n function test() {\n console.log(\"Hello, world\");\n }\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"js\"\n# source='function test() {\n# console.log(\"Hello, world\");\n# }\n# '\n# ></eo-code-block>\n# \n```\n"
34
34
  },
35
- "eo-alert": {
36
- "doc": "告警提示\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: div\nproperties:\n style:\n display: flex\n flex-direction: column\n gap: 10px\nslots:\n \"\":\n type: bricks\n bricks:\n - brick: eo-alert\n properties:\n textContent: 你好！欢迎使用EasyOps 2.0专业版，你可以根据自身需求添加业务模块。\n type: info\n closable: true\n - brick: eo-alert\n properties:\n textContent: 恭喜！你所提交的信息已经审核通过。\n type: success\n closable: true\n showIcon: true\n - brick: eo-alert\n properties:\n textContent: \"系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！\"\n type: warning\n closable: true\n showIcon: true\n - brick: eo-alert\n properties:\n textContent: 系统错误，请稍后重试。\n type: error\n closable: true\n showIcon: true\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 10px\">\n# <eo-alert closable id=\"brick-1\">\n# 你好！欢迎使用EasyOps 2.0专业版，你可以根据自身需求添加业务模块。\n# </eo-alert>\n# <eo-alert closable show-icon id=\"brick-2\"\n# >恭喜！你所提交的信息已经审核通过。</eo-alert\n# >\n# <eo-alert closable show-icon id=\"brick-3\">\n# 系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！\n# </eo-alert>\n# <eo-alert closable show-icon id=\"brick-4\">系统错误，请稍后重试。</eo-alert>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.type = \"info\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.type = \"success\";\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.type = \"warning\";\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.type = \"error\";\n# </script>\n# \n```\n\n### HasTitle\n\n```yaml preview\nbrick: div\nproperties:\n style:\n display: flex\n flex-direction: column\n gap: 10px\nslots:\n \"\":\n type: bricks\n bricks:\n - brick: eo-alert\n properties:\n textContent: 你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。\n type: info\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 帮助信息\n - brick: eo-alert\n properties:\n textContent: 你所提交的审核信息已全部通过审核，请及时跟进申请状况。\n type: success\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 已成功\n - brick: eo-alert\n properties:\n textContent: 你所提交的审核信息审核失败，可以进入个人信箱查看原因。如有疑问，请联系客服人员。\n type: warning\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 请注意\n - brick: eo-alert\n properties:\n textContent: 你的账户会员使用权限将在3天后到期，请及时跟进申请状况，如有疑问，请联系审核人员。\n type: error\n closable: true\n hasTitle: true\n showIcon: true\n slots:\n title:\n type: bricks\n bricks:\n - brick: div\n properties:\n textContent: 出错了\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 10px\">\n# <eo-alert closable has-title show-icon id=\"brick-1\">\n# <div slot=\"title\">帮助信息</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-2\">\n# <div slot=\"title\">已成功</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-3\">\n# <div slot=\"title\">请注意</div>\n# </eo-alert>\n# <eo-alert closable has-title show-icon id=\"brick-4\">\n# <div slot=\"title\">出错了</div>\n# </eo-alert>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.type = \"info\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.type = \"success\";\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.type = \"warning\";\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.type = \"error\";\n# </script>\n# \n```\n"
35
+ "eo-statistics-card": {
36
+ "doc": "统计卡片\n\n## Examples\n\n### Basic\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n children:\n - brick: eo-tooltip\n slot: titleSuffix\n properties:\n content: 安全评分是根据您的资产状态进行的评分\n trigger: hover\n placement: top-start\n children:\n - brick: eo-icon\n properties:\n lib: antd\n icon: question-circle\n theme: outlined\n style:\n font-size: 12px\n color: var(--text-color-secondary)\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# >\n# <eo-tooltip\n# slot=\"titleSuffix\"\n# content=\"安全评分是根据您的资产状态进行的评分\"\n# trigger=\"hover\"\n# placement=\"top-start\"\n# >\n# <eo-icon\n# lib=\"antd\"\n# icon=\"question-circle\"\n# theme=\"outlined\"\n# style=\"font-size: 12px; color: var(--text-color-secondary)\"\n# ></eo-icon>\n# </eo-tooltip>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Outline\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: border\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: background\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n outline: none\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"border\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"background\"\n# style=\"width: 300px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# outline=\"none\"\n# style=\"width: 300px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: large\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: medium\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件总数\n value: 1.2K\n unit: 个\n size: small\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"large\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"medium\"\n# style=\"width: 300px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件总数\"\n# value=\"1.2K\"\n# unit=\"个\"\n# size=\"small\"\n# style=\"width: 300px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n\n### Overview card\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\n cardTitle: 事件响应率\n value: <% PIPES.unitFormat(0.783, \"percent(1)\", 2)[0] %>\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#FEF3EC\"\n color: \"#F89B64\"\nchildren:\n - brick: div\n slot: description\n children:\n - brick: span\n properties:\n textContent: 同比上周\n - brick: span\n properties:\n style:\n color: var(--color-success)\n textContent: \"上升3.45%\"\n - brick: chart-v2.tiny-line-chart\n slot: basicContent\n properties:\n data:\n - month: Jan\n temperature: 3.9\n - month: Feb\n temperature: 4.2\n - month: Mar\n temperature: 5.7\n - month: Apr\n temperature: 8.5\n - month: May\n temperature: 11.9\n - month: Jun\n temperature: 15.2\n - month: Jul\n temperature: 17\n - month: Aug\n temperature: 16.6\n - month: Sep\n temperature: 10.2\n - month: Oct\n temperature: 10.3\n - month: Nov\n temperature: 6.6\n - month: Dec\n temperature: 4.8\n width: 200px\n height: 60px\n xField: month\n yField: temperature\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件响应率\"\n# value='&lt;% PIPES.unitFormat(0.783, \"percent(1)\", 2)[0] %&gt;'\n# id=\"brick-1\"\n# >\n# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升3.45%</span>\n# </div>\n# <chart-v2.tiny-line-chart\n# slot=\"basicContent\"\n# data=\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\"\n# width=\"200px\"\n# height=\"60px\"\n# x-field=\"month\"\n# y-field=\"temperature\"\n# ></chart-v2.tiny-line-chart>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#FEF3EC\",\n# color: \"#F89B64\",\n# };\n# </script>\n# \n```\n\n### Complex usage\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\n cardTitle: 事件响应数量\n value: 4,089\n descriptionPosition: right\n style:\n width: 500px\nchildren:\n - brick: eo-icon\n slot: titlePrefix\n properties:\n lib: antd\n icon: check-circle\n theme: filled\n style:\n font-size: 12px\n color: var(--color-success)\n - brick: div\n slot: description\n children:\n - brick: span\n properties:\n textContent: 同比上周\n - brick: span\n properties:\n style:\n color: var(--color-success)\n textContent: \"上升31.45%\"\n - brick: chart-v2.time-series-chart\n slot: extraContent\n properties:\n axis:\n yAxis:\n precision: 2\n data:\n - host_load_5_per_core: 3.95\n time: 1626600960\n - host_load_5_per_core: 3.88\n time: 1626601020\n - host_load_5_per_core: 3.91\n time: 1626601080\n - host_load_5_per_core: 4\n time: 1626601140\n - host_load_5_per_core: 4.08\n time: 1626601200\n - host_load_5_per_core: 3.91\n time: 1626601260\n - host_load_5_per_core: 3.92\n time: 1626601320\n - host_load_5_per_core: 3.81\n time: 1626601380\n - host_load_5_per_core: 3.93\n time: 1626601440\n - host_load_5_per_core: 3.9\n time: 1626601500\n - host_load_5_per_core: 3.9\n time: 1626601560\n - host_load_5_per_core: 3.8\n time: 1626601620\n - host_load_5_per_core: 3.74\n time: 1626601680\n - host_load_5_per_core: 4.16\n time: 1626601740\n - host_load_5_per_core: 4.12\n time: 1626601800\n - host_load_5_per_core: 4.08\n time: 1626601860\n - host_load_5_per_core: 3.98\n time: 1626601920\n - host_load_5_per_core: 3.79\n time: 1626601980\n - host_load_5_per_core: 3.65\n time: 1626602040\n - host_load_5_per_core: 3.83\n time: 1626602100\n - host_load_5_per_core: 3.7\n time: 1626602160\n - host_load_5_per_core: 3.69\n time: 1626602220\n - host_load_5_per_core: 3.81\n time: 1626602280\n - host_load_5_per_core: 3.81\n time: 1626602340\n - host_load_5_per_core: 3.87\n time: 1626602400\n - host_load_5_per_core: 4.07\n time: 1626602460\n - host_load_5_per_core: 4.02\n time: 1626602520\n - host_load_5_per_core: 4\n time: 1626602580\n - host_load_5_per_core: 3.91\n time: 1626602640\n - host_load_5_per_core: 3.82\n time: 1626602700\n - host_load_5_per_core: 3.76\n time: 1626602760\n - host_load_5_per_core: 3.75\n time: 1626602820\n - host_load_5_per_core: 3.7\n time: 1626602880\n - host_load_5_per_core: 3.86\n time: 1626602940\n - host_load_5_per_core: 3.97\n time: 1626603000\n - host_load_5_per_core: 3.8\n time: 1626603060\n - host_load_5_per_core: 3.91\n time: 1626603120\n - host_load_5_per_core: 3.92\n time: 1626603180\n - host_load_5_per_core: 3.92\n time: 1626603240\n - host_load_5_per_core: 4.03\n time: 1626603300\n - host_load_5_per_core: 4.05\n time: 1626603360\n - host_load_5_per_core: 3.98\n time: 1626603420\n - host_load_5_per_core: 4.26\n time: 1626603480\n - host_load_5_per_core: 4.59\n time: 1626603540\n - host_load_5_per_core: 4.59\n time: 1626603600\n - host_load_5_per_core: 4.45\n time: 1626603660\n - host_load_5_per_core: 4.41\n time: 1626603720\n - host_load_5_per_core: 4.37\n time: 1626603780\n - host_load_5_per_core: 4.17\n time: 1626603840\n - host_load_5_per_core: 4.41\n time: 1626603900\n - host_load_5_per_core: 4.36\n time: 1626603960\n - host_load_5_per_core: 4.25\n time: 1626604020\n - host_load_5_per_core: 4.37\n time: 1626604080\n - host_load_5_per_core: 4.33\n time: 1626604140\n - host_load_5_per_core: 4.43\n time: 1626604200\n - host_load_5_per_core: 4.48\n time: 1626604260\n - host_load_5_per_core: 4.42\n time: 1626604320\n - host_load_5_per_core: 4.55\n time: 1626604380\n - host_load_5_per_core: 4.64\n time: 1626604440\n - host_load_5_per_core: 4.68\n time: 1626604500\n - host_load_5_per_core: 4.67\n time: 1626604560\n - host_load_5_per_core: 4.75\n time: 1626604620\n - host_load_5_per_core: 4.62\n time: 1626604680\n - host_load_5_per_core: 4.95\n time: 1626604740\n - host_load_5_per_core: 5.29\n time: 1626604800\n - host_load_5_per_core: 5.61\n time: 1626604860\n - host_load_5_per_core: 5.5\n time: 1626604920\n - host_load_5_per_core: 5.96\n time: 1626604980\n - host_load_5_per_core: 5.62\n time: 1626605040\n - host_load_5_per_core: 5.67\n time: 1626605100\n - host_load_5_per_core: 5.56\n time: 1626605160\n - host_load_5_per_core: 5.37\n time: 1626605220\n - host_load_5_per_core: 5.53\n time: 1626605280\n - host_load_5_per_core: 5.46\n time: 1626605340\n - host_load_5_per_core: 5.42\n time: 1626605400\n - host_load_5_per_core: 5.4\n time: 1626605460\n - host_load_5_per_core: 5.33\n time: 1626605520\n - host_load_5_per_core: 5.35\n time: 1626605580\n - host_load_5_per_core: 5.21\n time: 1626605640\n - host_load_5_per_core: 5.22\n time: 1626605700\n - host_load_5_per_core: 5.25\n time: 1626605760\n - host_load_5_per_core: 5.42\n time: 1626605820\n - host_load_5_per_core: 5.51\n time: 1626605880\n - host_load_5_per_core: 5.31\n time: 1626605940\n - host_load_5_per_core: 5.4\n time: 1626606000\n - host_load_5_per_core: 5.76\n time: 1626606060\n - host_load_5_per_core: 5.64\n time: 1626606120\n - host_load_5_per_core: 5.36\n time: 1626606180\n - host_load_5_per_core: 5.53\n time: 1626606240\n - host_load_5_per_core: 5.38\n time: 1626606300\n - host_load_5_per_core: 5.25\n time: 1626606360\n - host_load_5_per_core: 5.24\n time: 1626606420\n - host_load_5_per_core: 5.09\n time: 1626606480\n - host_load_5_per_core: 5.15\n time: 1626606540\n - host_load_5_per_core: 5.14\n time: 1626606600\n - host_load_5_per_core: 5.03\n time: 1626606660\n - host_load_5_per_core: 4.96\n time: 1626606720\n - host_load_5_per_core: 4.74\n time: 1626606780\n - host_load_5_per_core: 4.49\n time: 1626606840\n - host_load_5_per_core: 4.51\n time: 1626606900\n - host_load_5_per_core: 4.44\n time: 1626606960\n - host_load_5_per_core: 4.54\n time: 1626607020\n - host_load_5_per_core: 4.46\n time: 1626607080\n - host_load_5_per_core: 4.53\n time: 1626607140\n - host_load_5_per_core: 4.27\n time: 1626607200\n - host_load_5_per_core: 4.31\n time: 1626607260\n - host_load_5_per_core: 4.3\n time: 1626607320\n - host_load_5_per_core: 4.07\n time: 1626607380\n - host_load_5_per_core: 3.97\n time: 1626607440\n - host_load_5_per_core: 4.31\n time: 1626607500\n - host_load_5_per_core: 4.19\n time: 1626607560\n - host_load_5_per_core: 4.2\n time: 1626607620\n - host_load_5_per_core: 4.21\n time: 1626607680\n - host_load_5_per_core: 4.08\n time: 1626607740\n - host_load_5_per_core: 3.94\n time: 1626607800\n - host_load_5_per_core: 3.9\n time: 1626607860\n - host_load_5_per_core: 3.78\n time: 1626607920\n - host_load_5_per_core: 3.8\n time: 1626607980\n - host_load_5_per_core: 3.83\n time: 1626608040\n - host_load_5_per_core: 3.92\n time: 1626608100\n - host_load_5_per_core: 3.88\n time: 1626608160\n - host_load_5_per_core: 4.05\n time: 1626608220\n - host_load_5_per_core: 4.04\n time: 1626608280\n - host_load_5_per_core: 4.01\n time: 1626608340\n - host_load_5_per_core: 4.13\n time: 1626608400\n - host_load_5_per_core: 3.94\n time: 1626608460\n - host_load_5_per_core: 3.91\n time: 1626608520\n - host_load_5_per_core: 3.86\n time: 1626608580\n - host_load_5_per_core: 3.75\n time: 1626608640\n - host_load_5_per_core: 3.82\n time: 1626608700\n - host_load_5_per_core: 4\n time: 1626608760\n - host_load_5_per_core: 3.88\n time: 1626608820\n - host_load_5_per_core: 3.8\n time: 1626608880\n - host_load_5_per_core: 4.05\n time: 1626608940\n - host_load_5_per_core: 4.42\n time: 1626609000\n - host_load_5_per_core: 4.53\n time: 1626609060\n height: 200\n showPoint: false\n xField: time\n xRange:\n from: 1626601000\n step: 60\n to: 1626609200\n yField: host_load_5_per_core\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件响应数量\"\n# value=\"4,089\"\n# description-position=\"right\"\n# style=\"width: 500px\"\n# >\n# <eo-icon\n# slot=\"titlePrefix\"\n# lib=\"antd\"\n# icon=\"check-circle\"\n# theme=\"filled\"\n# style=\"font-size: 12px; color: var(--color-success)\"\n# ></eo-icon>\n# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升31.45%</span>\n# </div>\n# <chart-v2.time-series-chart\n# slot=\"extraContent\"\n# axis=\"[object Object]\"\n# data=\"[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]\"\n# height=\"200\"\n# x-field=\"time\"\n# x-range=\"[object Object]\"\n# y-field=\"host_load_5_per_core\"\n# ></chart-v2.time-series-chart>\n# </eo-statistics-card>\n# \n```\n\n### Interaction\n\n#### Operator slot\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 300px\n children:\n - brick: eo-mini-actions\n slot: operator\n properties:\n actions:\n - icon:\n lib: antd\n icon: edit\n theme: outlined\n text: 编辑\n isDropdown: true\n event: edit\n - icon:\n lib: antd\n icon: delete\n theme: outlined\n text: 删除\n isDropdown: true\n disabled: true\n event: delete\n events:\n edit:\n - action: console.log\n delete:\n - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# >\n# <eo-mini-actions\n# slot=\"operator\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-2\"\n# ></eo-mini-actions>\n# </eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"edit\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"delete\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### Whole card\n\n```yaml preview gap\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: border\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: background\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n- brick: eo-link\n properties:\n type: plain\n url: /detail\n target: _blank\n children:\n - brick: eo-statistics-card\n properties:\n interactable: true\n outline: none\n cardTitle: 安全评分\n value: 93\n valueStyle:\n color: var(--color-success)\n icon:\n lib: easyops\n category: monitor\n icon: infra-monitor\n bgColor: \"#E6F0FC\"\n color: \"#3480EA\"\n style:\n width: 200px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"border\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# </eo-link>\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"background\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-2\"\n# ></eo-statistics-card>\n# </eo-link>\n# <eo-link type=\"plain\" url=\"/detail\" target=\"_blank\">\n# <eo-statistics-card\n# interactable\n# outline=\"none\"\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 200px\"\n# id=\"brick-3\"\n# ></eo-statistics-card>\n# </eo-link>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_2.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.valueStyle = {\n# color: \"var(--color-success)\",\n# };\n# brick_3.icon = {\n# lib: \"easyops\",\n# category: \"monitor\",\n# icon: \"infra-monitor\",\n# bgColor: \"#E6F0FC\",\n# color: \"#3480EA\",\n# };\n# </script>\n# \n```\n"
37
37
  },
38
- "eo-descriptions": {
39
- "doc": "通用描述列表构件。\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# ];\n# </script>\n# \n```\n\n## Examples\n\n### Column\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n descriptionTitle: UserInfo\n column: 2\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n\n- brick: eo-divider\n properties:\n dividerStyle:\n margin: 8px 0 4px 0\n- brick: eo-descriptions\n properties:\n descriptionTitle: 用户信息\n column: 4\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions\n# description-title=\"UserInfo\"\n# column=\"2\"\n# id=\"brick-1\"\n# ></eo-descriptions>\n# <eo-divider id=\"brick-2\"></eo-divider>\n# <eo-descriptions\n# description-title=\"用户信息\"\n# column=\"4\"\n# id=\"brick-3\"\n# ></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.dividerStyle = {\n# margin: \"8px 0 4px 0\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Layout\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n layout: horizontal\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: eo-divider\n properties:\n dividerStyle:\n margin: 8px 0 4px 0\n- brick: eo-descriptions\n properties:\n layout: vertical\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: div\n properties:\n style:\n margin: 10px 0px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions layout=\"horizontal\" id=\"brick-1\"></eo-descriptions>\n# <eo-divider id=\"brick-2\"></eo-divider>\n# <eo-descriptions layout=\"vertical\" id=\"brick-3\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.dividerStyle = {\n# margin: \"8px 0 4px 0\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n bordered: true\n layout: vertical\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n- brick: div\n properties:\n style:\n margin: 10px 0px\n- brick: eo-descriptions\n properties:\n bordered: true\n layout: horizontal\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions bordered layout=\"vertical\" id=\"brick-1\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# <eo-descriptions bordered layout=\"horizontal\" id=\"brick-2\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Hide Groups\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n hideGroups: other\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n group: \"other\"\n - label: 标签\n group: \"other\"\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n\n- brick: div\n properties:\n style:\n margin: 10px 0px\n- brick: eo-descriptions\n properties:\n hideGroups:\n - name\n - other\n list:\n - label: 姓名\n text: Tom\n group: name\n - label: 年龄\n text: 18\n group: age\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n group: other\n - label: 标签\n useBrick:\n - brick: eo-tag-list\n properties:\n list:\n - text: 阳光\n key: 0\n color: blue\n - text: 开朗\n key: 1\n color: red\n - text: 大男孩\n key: 2\n color: green\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# <div style=\"margin: 10px 0px\"></div>\n# <eo-descriptions id=\"brick-2\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.hideGroups = \"other\";\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# group: \"other\",\n# },\n# {\n# label: \"标签\",\n# group: \"other\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.hideGroups = [\"name\", \"other\"];\n# brick_2.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# group: \"name\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# group: \"age\",\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# group: \"other\",\n# },\n# {\n# label: \"标签\",\n# useBrick: [\n# {\n# brick: \"eo-tag-list\",\n# properties: {\n# list: [\n# {\n# text: \"阳光\",\n# key: 0,\n# color: \"blue\",\n# },\n# {\n# text: \"开朗\",\n# key: 1,\n# color: \"red\",\n# },\n# {\n# text: \"大男孩\",\n# key: 2,\n# color: \"green\",\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### DataSource\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n dataSource:\n text: Hello world\n name: Tom\n list:\n - label: 姓名\n field: name\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n - label: Form dataSource\n useBrick:\n brick: div\n properties:\n textContent: \"<% DATA.text %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions id=\"brick-1\"></eo-descriptions>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = {\n# text: \"Hello world\",\n# name: \"Tom\",\n# };\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# field: \"name\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# {\n# label: \"Form dataSource\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# textContent: \"<% DATA.text %>\",\n# },\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n style:\n padding: 2em\n backgroundColor: \"#d8d8d8\"\nchildren:\n - brick: eo-descriptions\n properties:\n themeVariant: elevo\n column: 1\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 身高\n text: 180cm\n - label: 爱好\n text: 篮球\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-descriptions\n# theme-variant=\"elevo\"\n# column=\"1\"\n# id=\"brick-1\"\n# ></eo-descriptions>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.list = [\n# {\n# label: \"姓名\",\n# text: \"Tom\",\n# },\n# {\n# label: \"年龄\",\n# text: 18,\n# },\n# {\n# label: \"身高\",\n# text: \"180cm\",\n# },\n# {\n# label: \"爱好\",\n# text: \"篮球\",\n# },\n# ];\n# </script>\n# \n```\n"
38
+ "eo-humanize-time": {
39
+ "doc": "人性化时间展示\n\n## Examples\n\n### 完整\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 精确\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: accurate\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"accurate\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 相对\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: relative\n isMillisecond: true\n value: 1714026348000\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time is-millisecond id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"relative\";\n# brick_1.value = 1714026348000;\n# </script>\n# \n```\n\n### 耗时\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: relative\n isCostTime: true\n value: 1000\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time is-cost-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"relative\";\n# brick_1.value = 1000;\n# </script>\n# \n```\n\n### 链接\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n link:\n target: _blank\n url: /aaa/bbb\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.link = {\n# target: \"_blank\",\n# url: \"/aaa/bbb\",\n# };\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n\n### 自定义格式\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n inputFormat: YYYY-MM-DD\n outputFormat: LLL\n value: \"2020-02-27 16:36\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time\n# input-format=\"YYYY-MM-DD\"\n# output-format=\"LLL\"\n# id=\"brick-1\"\n# ></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"2020-02-27 16:36\";\n# </script>\n# \n```\n\n### 仅日期\n\n```yaml preview\n- brick: eo-humanize-time\n properties:\n formatter: full\n type: date\n value: 1714026348\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-humanize-time type=\"date\" id=\"brick-1\"></eo-humanize-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.formatter = \"full\";\n# brick_1.value = 1714026348;\n# </script>\n# \n```\n"
40
40
  }
41
41
  }