@next-bricks/presentational 1.21.9 → 1.21.11

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 (107) hide show
  1. package/dist/bricks.json +1 -1
  2. package/dist/chunks/1614.5ce43617.js +2 -0
  3. package/dist/chunks/1614.5ce43617.js.map +1 -0
  4. package/dist/chunks/{1889.4559a6f7.js → 1889.01e1c38a.js} +2 -2
  5. package/dist/chunks/{1889.4559a6f7.js.map → 1889.01e1c38a.js.map} +1 -1
  6. package/dist/chunks/3171.7708784b.js +2 -0
  7. package/dist/chunks/3171.7708784b.js.map +1 -0
  8. package/dist/chunks/5399.2ab60504.js +2 -0
  9. package/dist/chunks/5399.2ab60504.js.map +1 -0
  10. package/dist/chunks/5552.f77213dd.js +2 -0
  11. package/dist/chunks/5552.f77213dd.js.map +1 -0
  12. package/dist/chunks/7116.05a51bac.js +2 -0
  13. package/dist/chunks/7116.05a51bac.js.map +1 -0
  14. package/dist/chunks/7455.0f5298ce.js +3 -0
  15. package/dist/chunks/7455.0f5298ce.js.LICENSE.txt +11 -0
  16. package/dist/chunks/7455.0f5298ce.js.map +1 -0
  17. package/dist/chunks/948.b8effe9f.js +3 -0
  18. package/dist/chunks/948.b8effe9f.js.map +1 -0
  19. package/dist/chunks/code-wrapper.40655769.js.map +1 -1
  20. package/dist/chunks/{eo-card-item.fbff6f7e.js → eo-card-item.f56c41e5.js} +3 -3
  21. package/dist/chunks/eo-card-item.f56c41e5.js.map +1 -0
  22. package/dist/chunks/eo-carousel-text.d8e8c2c9.js.map +1 -1
  23. package/dist/chunks/{eo-code-block.7efe5647.js → eo-code-block.a7162247.js} +2 -2
  24. package/dist/chunks/eo-code-block.a7162247.js.map +1 -0
  25. package/dist/chunks/eo-code-display.ffd79558.js.map +1 -1
  26. package/dist/chunks/eo-current-time.7cbef918.js.map +1 -1
  27. package/dist/chunks/{eo-descriptions.b8320ca9.js → eo-descriptions.1ab98c43.js} +3 -3
  28. package/dist/chunks/{eo-descriptions.b8320ca9.js.map → eo-descriptions.1ab98c43.js.map} +1 -1
  29. package/dist/chunks/eo-humanize-time.2397ce6e.js.map +1 -1
  30. package/dist/chunks/{eo-info-card-item.0d15cb28.js → eo-info-card-item.e6403b4d.js} +3 -3
  31. package/dist/chunks/eo-info-card-item.e6403b4d.js.map +1 -0
  32. package/dist/chunks/{eo-loading-step.834e0aa3.js → eo-loading-step.259d7985.js} +3 -3
  33. package/dist/chunks/{eo-loading-step.834e0aa3.js.map → eo-loading-step.259d7985.js.map} +1 -1
  34. package/dist/chunks/eo-pagination.16fd816a.js.map +1 -1
  35. package/dist/chunks/eo-statistics-card.410b5416.js.map +1 -1
  36. package/dist/chunks/{main.7a4b0b01.js → main.519bfa38.js} +2 -2
  37. package/dist/chunks/main.519bfa38.js.map +1 -0
  38. package/dist/examples.json +13 -13
  39. package/dist/{index.db5144bf.js → index.71ea98e1.js} +2 -2
  40. package/dist/index.71ea98e1.js.map +1 -0
  41. package/dist/manifest.json +49 -39
  42. package/dist/types.json +2 -2
  43. package/dist-types/card-item/index.d.ts +8 -4
  44. package/dist-types/carousel-text/index.d.ts +1 -1
  45. package/dist-types/code-block/index.d.ts +12 -3
  46. package/dist-types/code-display/index.d.ts +0 -1
  47. package/dist-types/code-wrapper/index.d.ts +7 -2
  48. package/dist-types/current-time/index.d.ts +1 -1
  49. package/dist-types/descriptions/index.d.ts +4 -3
  50. package/dist-types/humanize-time/index.d.ts +8 -8
  51. package/dist-types/info-card-item/index.d.ts +10 -9
  52. package/dist-types/loading-step/index.d.ts +8 -8
  53. package/dist-types/pagination/index.d.ts +7 -0
  54. package/dist-types/statistics-card/index.d.ts +2 -2
  55. package/docs/eo-alert.md +65 -1
  56. package/docs/eo-alert.react.md +127 -0
  57. package/docs/eo-card-item.md +179 -210
  58. package/docs/eo-card-item.react.md +578 -0
  59. package/docs/eo-carousel-text.md +49 -2
  60. package/docs/eo-carousel-text.react.md +62 -0
  61. package/docs/eo-code-block.md +135 -4
  62. package/docs/eo-code-block.react.md +146 -0
  63. package/docs/eo-code-display.md +97 -1
  64. package/docs/eo-code-display.react.md +116 -0
  65. package/docs/eo-code-wrapper.md +108 -0
  66. package/docs/eo-code-wrapper.react.md +100 -0
  67. package/docs/eo-current-time.md +40 -1
  68. package/docs/eo-current-time.react.md +53 -0
  69. package/docs/eo-descriptions.md +74 -4
  70. package/docs/eo-descriptions.react.md +329 -0
  71. package/docs/eo-divider.md +105 -17
  72. package/docs/eo-divider.react.md +129 -0
  73. package/docs/eo-humanize-time.md +89 -42
  74. package/docs/eo-humanize-time.react.md +109 -0
  75. package/docs/eo-info-card-item.md +129 -183
  76. package/docs/eo-info-card-item.react.md +188 -0
  77. package/docs/eo-loading-step.md +96 -1
  78. package/docs/eo-loading-step.react.md +102 -0
  79. package/docs/eo-pagination.md +74 -1
  80. package/docs/eo-pagination.react.md +93 -0
  81. package/docs/eo-statistics-card.md +175 -456
  82. package/docs/eo-statistics-card.react.md +376 -0
  83. package/package.json +2 -2
  84. package/dist/chunks/3171.3bb3ff80.js +0 -2
  85. package/dist/chunks/3171.3bb3ff80.js.map +0 -1
  86. package/dist/chunks/4837.3ae6253e.js +0 -2
  87. package/dist/chunks/4837.3ae6253e.js.map +0 -1
  88. package/dist/chunks/5045.b0f85f6b.js +0 -2
  89. package/dist/chunks/5045.b0f85f6b.js.map +0 -1
  90. package/dist/chunks/5399.23640b2d.js +0 -2
  91. package/dist/chunks/5399.23640b2d.js.map +0 -1
  92. package/dist/chunks/5552.5d29c532.js +0 -2
  93. package/dist/chunks/5552.5d29c532.js.map +0 -1
  94. package/dist/chunks/7218.4acefe69.js +0 -2
  95. package/dist/chunks/7218.4acefe69.js.map +0 -1
  96. package/dist/chunks/948.817a1ef0.js +0 -3
  97. package/dist/chunks/948.817a1ef0.js.map +0 -1
  98. package/dist/chunks/eo-card-item.fbff6f7e.js.map +0 -1
  99. package/dist/chunks/eo-code-block.7efe5647.js.map +0 -1
  100. package/dist/chunks/eo-info-card-item.0d15cb28.js.map +0 -1
  101. package/dist/chunks/main.7a4b0b01.js.map +0 -1
  102. package/dist/index.db5144bf.js.map +0 -1
  103. /package/dist/chunks/{948.817a1ef0.js.LICENSE.txt → 948.b8effe9f.js.LICENSE.txt} +0 -0
  104. /package/dist/chunks/{eo-card-item.fbff6f7e.js.LICENSE.txt → eo-card-item.f56c41e5.js.LICENSE.txt} +0 -0
  105. /package/dist/chunks/{eo-descriptions.b8320ca9.js.LICENSE.txt → eo-descriptions.1ab98c43.js.LICENSE.txt} +0 -0
  106. /package/dist/chunks/{eo-info-card-item.0d15cb28.js.LICENSE.txt → eo-info-card-item.e6403b4d.js.LICENSE.txt} +0 -0
  107. /package/dist/chunks/{eo-loading-step.834e0aa3.js.LICENSE.txt → eo-loading-step.259d7985.js.LICENSE.txt} +0 -0
package/dist/examples.json CHANGED
@@ -1,41 +1,41 @@
1
1
  {
2
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"
3
+ "doc": "---\ntagName: eo-descriptions\ndisplayName: EoDescriptions\ndescription: 通用描述列表构件\ncategory: text\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-descriptions\n\n> 通用描述列表构件\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ---------------- | ---------------------------- | ---- | -------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| descriptionTitle | `string` | 否 | - | 描述标题 |\n| list | `DescriptionItem[]` | 否 | - | 描述列表，每项可通过 `text`、`field` 或 `useBrick` 指定内容 |\n| showCard | `boolean` | 否 | `true` | 是否展示卡片背景（`themeVariant` 为 `elevo` 时强制不展示卡片） |\n| column | `number` | 否 | `3` | 列数 |\n| templateColumns | `string` | 否 | - | CSS [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)，优先级高于 `column` |\n| layout | `\"horizontal\" \\| \"vertical\"` | 否 | `\"horizontal\"` | 布局模式 |\n| bordered | `boolean` | 否 | `false` | 是否展示边框 |\n| hideGroups | `string \\| string[]` | 否 | - | 需要隐藏的分组名称，匹配 list 项的 group 字段，支持字符串或字符串数组 |\n| dataSource | `object` | 否 | - | 数据源，供 list 项通过 `field` 读取字段值或通过 `useBrick` 的 `DATA` 引用 |\n| themeVariant | `\"default\" \\| \"elevo\"` | 否 | - | 主题变体；`elevo` 模式下不渲染外层卡片，且标签后不添加冒号 |\n\n### DescriptionItem\n\n| 字段 | 类型 | 说明 |\n| ---------- | ------------------ | ----------------------------------------------------- |\n| label | `string` | 描述项标签文本 |\n| field | `string` | 从 `dataSource` 中读取值的字段路径（使用 lodash get） |\n| group | `string` | 所属分组名，可配合 `hideGroups` 隐藏整组 |\n| text | `string \\| number` | 静态文本内容，`field` 未设置时使用 |\n| useBrick | `UseBrickConf` | 自定义渲染 brick，`dataSource` 作为 `DATA` 传入 |\n| gridColumn | `string` | CSS `grid-column` 值，用于手动控制该项的列跨度 |\n\n## Examples\n\n### Basic\n\n最简用法，展示一组描述列表。\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### Column\n\n通过 `column` 控制列数，并通过 `descriptionTitle` 设置标题。\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`layout` 支持 `horizontal`（标签与内容同行）和 `vertical`（标签在内容上方）两种布局。\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`bordered` 为 `true` 时，列表项添加边框线，标签后不显示冒号。\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通过 `hideGroups` 隐藏指定 group 的所有描述项，支持单个字符串或字符串数组。\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通过 `dataSource` 提供数据源，list 项可用 `field` 读取字段，也可在 `useBrick` 中通过 `DATA` 引用整个数据源。\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### Template Columns\n\n通过 `templateColumns` 精确控制各列宽度，list 项可用 `gridColumn` 跨列显示。\n\n```yaml preview\n- brick: eo-descriptions\n properties:\n templateColumns: \"200px 1fr 2fr\"\n list:\n - label: 姓名\n text: Tom\n - label: 年龄\n text: 18\n - label: 备注\n text: 这是一段较长的备注信息\n gridColumn: \"2 / 4\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-descriptions\n# template-columns=\"200px 1fr 2fr\"\n# id=\"brick-1\"\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: \"这是一段较长的备注信息\",\n# gridColumn: \"2 / 4\",\n# },\n# ];\n# </script>\n# \n```\n\n### Theme Variant Elevo\n\n`themeVariant` 为 `elevo` 时，不渲染外层卡片，适用于 AI 门户等特殊背景场景。\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
4
  },
5
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"
6
+ "doc": "---\ntagName: eo-alert\ndisplayName: WrappedEoAlert\ndescription: 告警提示\ncategory: display-component\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-alert\n\n> 告警提示\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------------------- | --------------------------------------------- | ---- | ------ | --------------------------------------------------------------------------------------------------------------- |\n| type | `\"success\" \\| \"info\" \\| \"warning\" \\| \"error\"` | 是 | - | 警告类型 |\n| hasTitle | `boolean` | 否 | - | 是否显示标题。开启后，可以使用 `title` 插槽 |\n| showIcon | `boolean` | 否 | - | 是否显示提示图标 |\n| closable | `boolean` | 否 | - | 是否显示关闭按钮 |\n| localStorageKey | `string` | 否 | - | 以该值和页面 url 作为命名空间，决定是否显示该警告提示。关闭后将记录到 localStorage，下次访问同一 url 时不再显示 |\n| disableUrlNamespace | `boolean` | 否 | - | 仅以 `localStorageKey` 作为命名空间（不拼接页面 url），关闭后在所有页面均不再显示 |\n\n## Slots\n\n| 名称 | 说明 |\n| -------- | ---------------------------- |\n| （默认） | 内容区 |\n| title | 标题，需配合 `hasTitle` 使用 |\n\n## Examples\n\n### Basic\n\n展示四种警告类型（`info`、`success`、`warning`、`error`），并启用关闭按钮。\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通过 `hasTitle` 启用标题区域，并使用 `title` 插槽放置标题内容。\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\n### LocalStorageKey\n\n通过 `localStorageKey` 和 `disableUrlNamespace` 控制关闭后的持久化范围：`disableUrlNamespace` 为 `true` 时，关闭后在所有页面均不再显示；否则仅在当前 url 下不再显示。\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: 关闭后仅在当前页面不再显示（localStorageKey + url 命名空间）。\n type: info\n closable: true\n showIcon: true\n localStorageKey: demo-alert-url\n - brick: eo-alert\n properties:\n textContent: 关闭后在所有页面均不再显示（仅 localStorageKey 命名空间）。\n type: warning\n closable: true\n showIcon: true\n localStorageKey: demo-alert-global\n disableUrlNamespace: true\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 10px\">\n# <eo-alert closable show-icon local-storage-key=\"demo-alert-url\" id=\"brick-1\">\n# 关闭后仅在当前页面不再显示（localStorageKey + url 命名空间）。\n# </eo-alert>\n# <eo-alert\n# closable\n# show-icon\n# local-storage-key=\"demo-alert-global\"\n# disable-url-namespace\n# id=\"brick-2\"\n# >\n# 关闭后在所有页面均不再显示（仅 localStorageKey 命名空间）。\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 = \"warning\";\n# </script>\n# \n```\n"
7
7
  },
8
8
  "eo-code-display": {
9
- "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"
9
+ "doc": "---\ntagName: eo-code-display\ndisplayName: WrappedEoCodeDisplay\ndescription: 代码展示\ncategory: display-component\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-code-display\n\n> 代码展示\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ---------------- | --------- | ---- | ------ | ------------------------------------------------------------------------------ |\n| value | `string` | - | `\"\"` | 代码内容 |\n| language | `string` | - | - | 语言，具体查阅 [Supported languages](https://prismjs.com/#supported-languages) |\n| hideLineNumber | `boolean` | - | - | 是否隐藏行号 |\n| maxLines | `number` | - | - | 最大行数 |\n| minLines | `number` | - | - | 最小行数 |\n| showCopyButton | `boolean` | - | `true` | 是否显示复制按钮 |\n| showExportButton | `boolean` | - | - | 是否显示导出按钮 |\n| exportFileName | `string` | - | - | 导出的文件名 |\n\n## Examples\n\n### Basic\n\n基本用法，展示一段 JavaScript 代码并显示行号。\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\n### 隐藏行号\n\n隐藏代码行号显示。\n\n```yaml preview\n- brick: eo-code-display\n properties:\n language: javascript\n hideLineNumber: true\n value: |\n const greeting = \"Hello, World!\";\n console.log(greeting);\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-display\n# language=\"javascript\"\n# hide-line-number\n# value='const greeting = \"Hello, World!\";\n# console.log(greeting);\n# '\n# ></eo-code-display>\n# \n```\n\n### 限制行数\n\n通过 maxLines 和 minLines 控制代码展示区域的行数范围。\n\n```yaml preview\n- brick: eo-code-display\n properties:\n language: javascript\n maxLines: 5\n minLines: 3\n value: |\n const a = 1;\n const b = 2;\n const c = 3;\n const d = 4;\n const e = 5;\n const f = 6;\n const g = 7;\n const h = 8;\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-display\n# language=\"javascript\"\n# max-lines=\"5\"\n# min-lines=\"3\"\n# value=\"const a = 1;\n# const b = 2;\n# const c = 3;\n# const d = 4;\n# const e = 5;\n# const f = 6;\n# const g = 7;\n# const h = 8;\n# \"\n# ></eo-code-display>\n# \n```\n\n### 工具栏按钮\n\n显示复制和导出按钮，支持将代码复制到剪贴板或导出为文件。\n\n```yaml preview\n- brick: eo-code-display\n properties:\n language: json\n showCopyButton: true\n showExportButton: true\n exportFileName: config.json\n value: |\n {\n \"name\": \"my-app\",\n \"version\": \"1.0.0\",\n \"description\": \"A sample application\"\n }\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-display\n# language=\"json\"\n# show-copy-button\n# show-export-button\n# export-file-name=\"config.json\"\n# value='{\n# \"name\": \"my-app\",\n# \"version\": \"1.0.0\",\n# \"description\": \"A sample application\"\n# }\n# '\n# ></eo-code-display>\n# \n```\n\n### 隐藏复制按钮\n\n将 showCopyButton 设置为 false 隐藏默认的复制按钮。\n\n```yaml preview\n- brick: eo-code-display\n properties:\n language: css\n showCopyButton: false\n value: |\n .container {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-display\n# language=\"css\"\n# value=\".container {\n# display: flex;\n# justify-content: center;\n# align-items: center;\n# }\n# \"\n# ></eo-code-display>\n# \n```\n"
10
10
  },
11
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"
12
+ "doc": "---\ntagName: eo-pagination\ndisplayName: WrappedEoPagination\ndescription: 分页\ncategory: navigation\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-pagination\n\n> 分页\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------------- | ------------------- | ---- | ------------------- | ----------------------------------------------------------------- |\n| type | `\"page\" \\| \"token\"` | - | `\"page\"` | 分页模式：`page` 为页码模式，`token` 为令牌（游标）模式 |\n| total | `number` | - | `0` | 数据总数 |\n| page | `number` | - | `1` | 当前页数 |\n| pageSize | `number` | - | `20` | 每页条数 |\n| pageSizeOptions | `number[]` | - | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |\n| showSizeChanger | `boolean` | - | `true` | 是否展示`pageSize`分页器 |\n| nextToken | `string` | - | - | 令牌模式下的下一页令牌（nextToken），有值时\"下一页\"按钮可点击 |\n| previousToken | `string` | - | - | 令牌模式下的上一页令牌（previousToken），有值时\"上一页\"按钮可点击 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |\n| change | `ChangeDetail` — 页码模式下为 `{ page: 当前页码, pageSize: 每页条数 }`；令牌模式下为 `{ type: \"token\", nextToken: 下一页令牌, pageSize: 每页条数 }` | 页码及每页条数改变事件 |\n\n## Examples\n\n### Basic\n\n基本用法，页码模式下展示分页并监听翻页事件。\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使用令牌（游标）模式进行分页，通过 nextToken 和 previousToken 控制翻页。\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\n### Hide Size Changer\n\n隐藏每页条数选择器。\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n total: 500\n pageSize: 10\n page: 1\n showSizeChanger: false\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination total=\"500\" page-size=\"10\" page=\"1\" id=\"brick-1\"></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### Custom Page Size Options\n\n自定义每页条数选项。\n\n```yaml preview\nbrick: eo-pagination\nproperties:\n total: 2000\n pageSize: 25\n page: 1\n pageSizeOptions:\n - 25\n - 50\n - 100\n - 200\nevents:\n change:\n - action: console.log\n args:\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-pagination\n# total=\"2000\"\n# page-size=\"25\"\n# page=\"1\"\n# id=\"brick-1\"\n# ></eo-pagination>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pageSizeOptions = [25, 50, 100, 200];\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
13
13
  },
14
14
  "eo-card-item": {
15
- "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"
15
+ "doc": "---\ntagName: eo-card-item\ndisplayName: WrappedEoCardItem\ndescription: 信息类卡片 —— 通用卡片\ncategory: card-info\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-card-item\n\n> 信息类卡片 —— 通用卡片\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------------- | ------------------------- | ---- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| cardTitle | `string` | 是 | - | 卡片标题 |\n| description | `string` | 否 | - | 描述信息 |\n| hasHeader | `boolean` | 否 | - | 是否有顶部小标题区域，开启后会显示 `auxiliaryText` 辅助文字 |\n| auxiliaryText | `string` | 否 | - | 顶部辅助文字，在 `hasHeader` 为 `true` 时展示 |\n| avatar | `IconAvatar \\| ImgAvatar` | 否 | - | 图标或图片，支持图标头像（IconAvatar）和图片头像（ImgAvatar）两种形式 |\n| avatarPosition | `\"content\" \\| \"cover\"` | 否 | - | 头像的放置位置，设为 `cover` 时头像显示在封面区域，否则显示在内容区域 |\n| avatarPlacement | `\"left\" \\| \"title-left\"` | 否 | `\"left\"` | 图标对齐方式，`left` 在内容左侧，`title-left` 紧靠标题左侧。`avatarPosition` 不为 `cover` 时有效 |\n| url | `string \\| object` | 否 | - | 链接地址，使用内部路由跳转 |\n| href | `string` | 否 | - | 设置后使用原生 `<a>` 标签跳转，通常用于外链 |\n| target | `string` | 否 | - | 链接跳转目标，如 `_blank` |\n| actions | `ActionType[]` | 否 | - | 操作按钮组 |\n| showActions | `\"always\" \\| \"hover\"` | 否 | `\"always\"` | 操作按钮组的展示时机，`always` 始终展示，`hover` 悬停时展示 |\n| selected | `boolean` | 否 | - | 是否处于选中状态 |\n| styleType | `\"grayish\"` | 否 | - | 卡片样式类型，设为 `grayish` 时使用灰色调样式 |\n| hasCover | `boolean` | 否 | - | 是否启用封面区域 |\n| coverImage | `string` | 否 | - | 封面背景图片 URL |\n| coverColor | `string` | 否 | - | 封面纯色背景颜色 |\n| coverImageSize | `string` | 否 | - | 封面图片尺寸，同 CSS `background-size`，参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size) |\n| tagConfig | `TagConfig` | 否 | - | 徽标配置，可设置文本、图标、背景色和字体颜色。`bgColor` 支持预设色值（blue/cyan/geekblue/grayblue/gray/green/orange/purple/red/yellow）或自定义颜色值 |\n| borderColor | `string` | 否 | - | 卡片边框颜色，支持预设色值（同 `tagConfig.bgColor`）或自定义颜色值 |\n| stacked | `boolean` | 否 | - | 是否展示堆叠效果（在卡片后方渲染两层装饰层） |\n| cardStyle | `CSSProperties` | 否 | - | 卡片外层容器样式 |\n| cardBodyStyle | `CSSProperties` | 否 | - | 卡片内容区域样式 |\n| cardTitleStyle | `CSSProperties` | 否 | - | 卡片标题样式 |\n\n## Events\n\n| 事件 | detail | 说明 |\n| ------------ | ------------------ | ------------------ |\n| action.click | `SimpleActionType` | 操作按钮点击时触发 |\n| tag.click | - | 徽标点击时触发 |\n\n## Slots\n\n| 名称 | 说明 |\n| --------------- | --------------------------------------------------------------------- |\n| （默认） | 内容区域，通常放置卡片自定义内容 |\n| title-suffix | 标题后缀区域，通常放置状态标签等内容 |\n| expanded-area-1 | 扩展区域 1，通常放置标签信息 |\n| expanded-area-2 | 扩展区域 2，通常放置操作和其他属性信息（图标/头像/小字描述/统计信息） |\n\n## Examples\n\n### Basic\n\n展示带图标、描述、顶部辅助文字和操作按钮的基本卡片。\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通过 `showActions: hover` 使操作按钮仅在鼠标悬停时显示。\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### Cover\n\n通过 `hasCover` 启用封面区域，可使用图片或纯色背景，并支持将头像放置在封面上。\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### coverImageSize\n\n通过 `coverImageSize` 控制封面图片的显示尺寸。\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 coverImageSize: cover\n cardTitle: cover 模式\n description: 图片铺满封面区域\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 coverImageSize: contain\n cardTitle: contain 模式\n description: 图片完整显示在封面区域\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 280px\"\n# has-cover\n# card-title=\"cover 模式\"\n# description=\"图片铺满封面区域\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# style=\"width: 280px\"\n# has-cover\n# card-title=\"contain 模式\"\n# description=\"图片完整显示在封面区域\"\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.coverImageSize = \"cover\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.coverImage =\n# \"https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png\";\n# brick_2.coverImageSize = \"contain\";\n# </script>\n# \n```\n\n### avatarPlacement\n\n通过 `avatarPlacement: title-left` 将图标紧靠标题左侧显示。\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通过 `selected` 高亮选中状态，支持默认样式和 `grayish` 样式类型。\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通过 `borderColor` 设置卡片边框颜色，支持预设色值和自定义颜色，可配合 `selected` 使用。\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### tagConfig\n\n通过 `tagConfig` 在卡片右上角显示徽标，支持文字类型（`text`）和图标类型（`icon`），以及预设色值和自定义颜色。点击徽标触发 `tag.click` 事件。\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: \"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 events:\n tag.click:\n - action: message.success\n args:\n - 收藏成功\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-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-5\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-6\"\n# ></eo-card-item>\n# <eo-card-item\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# target=\"_blank\"\n# id=\"brick-7\"\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: \"rgb(228 236 183)\",\n# color: \"#000\",\n# };\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"info-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"blue\",\n# };\n# brick_5.url = \"/test\";\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"check-circle\",\n# theme: \"outlined\",\n# },\n# bgColor: \"green\",\n# };\n# brick_6.url = \"/test\";\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.tagConfig = {\n# icon: {\n# lib: \"antd\",\n# icon: \"star\",\n# theme: \"filled\",\n# },\n# bgColor: \"blue\",\n# };\n# brick_7.url = \"/test\";\n# brick_7.addEventListener(\"tag.click\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"收藏成功\" });\n# });\n# </script>\n# \n```\n\n### styleType\n\n使用 `styleType: grayish` 展示灰色调卡片样式。\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通过 `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通过 `cardStyle`、`cardBodyStyle`、`cardTitleStyle` 自定义卡片各区域的样式。\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: 通过 cardStyle 设置卡片背景\n- brick: eo-card-item\n properties:\n style:\n width: 280px\n marginTop: 12px\n cardBodyStyle:\n padding: 20px 24px\n cardTitleStyle:\n fontSize: 18px\n fontWeight: bold\n cardTitle: 自定义内容区和标题样式\n description: 通过 cardBodyStyle 和 cardTitleStyle 调整布局\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-card-item\n# style=\"width: 280px\"\n# card-title=\"自定义背景色\"\n# description=\"通过 cardStyle 设置卡片背景\"\n# id=\"brick-1\"\n# ></eo-card-item>\n# <eo-card-item\n# style=\"width: 280px; margin-top: 12px\"\n# card-title=\"自定义内容区和标题样式\"\n# description=\"通过 cardBodyStyle 和 cardTitleStyle 调整布局\"\n# id=\"brick-2\"\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# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.cardBodyStyle = {\n# padding: \"20px 24px\",\n# };\n# brick_2.cardTitleStyle = {\n# fontSize: \"18px\",\n# fontWeight: \"bold\",\n# };\n# </script>\n# \n```\n\n### Slots\n\n利用 `title-suffix` 展示标题后缀标签，`expanded-area-1` 展示标签列表，`expanded-area-2` 展示底部操作栏。\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 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]\"\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"
16
16
  },
17
17
  "eo-divider": {
18
- "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"
18
+ "doc": "---\ntagName: eo-divider\ndisplayName: WrappedEoDivider\ndescription: 分割线\ncategory: container-display\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-divider\n\n> 分割线\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------------ | ------------------------------------------- | ---- | -------------- | ---------------------------------------------------------------------- |\n| orientation | `\"left\" \\| \"center\" \\| \"right\"` | 否 | `\"center\"` | 标题位置，在 `horizontal` 类型的分割线中使用 |\n| dashed | `boolean` | 否 | `false` | 是否渲染为虚线 |\n| type | `\"horizontal\" \\| \"vertical\" \\| \"radiation\"` | 否 | `\"horizontal\"` | 分割线类型：水平、垂直或放射。`radiation` 是特殊样式类型，外观固定 |\n| proportion | `[number, number]` | 否 | - | 数值比例，仅在 `type=\"radiation\"` 时生效。例如展示\"1/3\"时传入 `[1, 3]` |\n| dividerStyle | `CSSProperties` | 否 | - | 分割线容器的自定义内联样式 |\n\n## Examples\n\n### Basic\n\n水平分割线，无文字内容。\n\n```yaml preview\n- brick: eo-divider\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider></eo-divider>\n# \n```\n\n### orientation\n\n设置 `orientation` 控制插槽文字在水平分割线中的对齐位置。\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n gap: 8px\n children:\n - brick: eo-divider\n properties:\n orientation: left\n children:\n - brick: span\n properties:\n textContent: 左对齐\n - brick: eo-divider\n properties:\n orientation: center\n children:\n - brick: span\n properties:\n textContent: 居中\n - brick: eo-divider\n properties:\n orientation: right\n children:\n - brick: span\n properties:\n textContent: 右对齐\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 8px\">\n# <eo-divider id=\"brick-1\">\n# <span>左对齐</span>\n# </eo-divider>\n# <eo-divider id=\"brick-2\">\n# <span>居中</span>\n# </eo-divider>\n# <eo-divider id=\"brick-3\">\n# <span>右对齐</span>\n# </eo-divider>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.orientation = \"left\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.orientation = \"center\";\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.orientation = \"right\";\n# </script>\n# \n```\n\n### dashed\n\n启用 `dashed` 后分割线以虚线样式呈现。\n\n```yaml preview\n- brick: eo-divider\n properties:\n dashed: true\n children:\n - brick: span\n properties:\n textContent: 虚线分割\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider dashed>\n# <span>虚线分割</span>\n# </eo-divider>\n# \n```\n\n### type vertical\n\n`type=\"vertical\"` 用于行内元素之间的垂直分隔。\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n alignItems: center\n children:\n - brick: span\n properties:\n textContent: 文本A\n - brick: eo-divider\n properties:\n type: vertical\n - brick: span\n properties:\n textContent: 文本B\n - brick: eo-divider\n properties:\n type: vertical\n dashed: true\n - brick: span\n properties:\n textContent: 文本C\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; align-items: center\">\n# <span>文本A</span>\n# <eo-divider type=\"vertical\"></eo-divider>\n# <span>文本B</span>\n# <eo-divider type=\"vertical\" dashed></eo-divider>\n# <span>文本C</span>\n# </div>\n# \n```\n\n### type radiation\n\n`type=\"radiation\"` 配合 `proportion` 展示数值比例（如进度或占比）。\n\n```yaml preview\n- brick: eo-divider\n properties:\n type: radiation\n proportion:\n - 1\n - 3\n children:\n - brick: span\n properties:\n textContent: 完成进度\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider type=\"radiation\" id=\"brick-1\">\n# <span>完成进度</span>\n# </eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.proportion = [1, 3];\n# </script>\n# \n```\n\n### dividerStyle\n\n通过 `dividerStyle` 自定义分割线容器的内联样式。\n\n```yaml preview\n- brick: eo-divider\n properties:\n dividerStyle:\n borderColor: \"#1890ff\"\n margin: \"16px 0\"\n children:\n - brick: span\n properties:\n textContent: 自定义样式\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-divider id=\"brick-1\">\n# <span>自定义样式</span>\n# </eo-divider>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dividerStyle = {\n# borderColor: \"#1890ff\",\n# margin: \"16px 0\",\n# };\n# </script>\n# \n```\n"
19
19
  },
20
20
  "eo-info-card-item": {
21
- "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"
21
+ "doc": "---\ntagName: eo-info-card-item\ndisplayName: WrappedEoInfoCardItem\ndescription: 信息类卡片 —— 横向布局信息卡片\ncategory: card-info\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-info-card-item\n\n> 展示带图标、标题、描述和详细列表的横向布局信息卡片，支持链接跳转、插槽图标、标题后缀及操作区。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ----------- | ------------------ | ---- | ------ | ---------------------------------------------------------------------------------- |\n| cardTitle | `string` | 是 | - | 卡片标题 |\n| description | `string` | 否 | - | 卡片描述信息 |\n| url | `string` | 否 | - | 链接地址，点击卡片时跳转 |\n| target | `string` | 否 | - | 链接跳转目标，如 `_blank`；设置后使用 `window.open` 跳转，否则使用内部路由跳转 |\n| cardIcon | `IconAvatar` | 否 | - | 图标配置，支持设置图标、颜色、尺寸、形状和背景色。`icon` slot 有内容时此属性不显示 |\n| detailList | `InfoCardDetail[]` | 否 | - | 详细列表，每项可设置标题、描述文字或自定义构件。4 项及以上时以等宽网格排列 |\n\n## Slots\n\n| 名称 | 说明 |\n| ------ | -------------------------------------------------------- |\n| icon | 图标区域，放置自定义图标；有内容时 `cardIcon` 属性不生效 |\n| title | 标题后缀区域，通常放置状态标签等内容 |\n| action | 操作区域，点击不会触发卡片跳转 |\n\n## Examples\n\n### Basic\n\n展示带图标、描述和详细列表的基本横向信息卡片。\n\n```yaml preview\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 bgColor: var(--theme-orange-background)\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# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资产盘点\"\n# description=\"资产盘点为设备运维人员提供便捷的设备资产盘点能力，使用自动化的盘点方式替换原有人工盘点\"\n# id=\"brick-1\"\n# ></eo-info-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardIcon = {\n# color: \"orange\",\n# icon: {\n# icon: \"patch-management\",\n# lib: \"easyops\",\n# category: \"app\",\n# },\n# bgColor: \"var(--theme-orange-background)\",\n# };\n# brick_1.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# </script>\n# \n```\n\n### With url and target\n\n点击卡片时通过 `url` 和 `target` 跳转到指定地址。\n\n```yaml preview\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 持续集成\n url: /ci\n target: _blank\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: 持续集成服务，点击卡片在新标签页打开\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"持续集成\"\n# url=\"/ci\"\n# target=\"_blank\"\n# description=\"持续集成服务，点击卡片在新标签页打开\"\n# id=\"brick-1\"\n# ></eo-info-card-item>\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# </script>\n# \n```\n\n### cardIcon shapes\n\n通过 `cardIcon.shape` 控制图标头像的形状，支持 `circle`、`square`、`round-square`。\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n gap: 12px\n width: 100%\n children:\n - brick: eo-info-card-item\n properties:\n cardTitle: 圆形图标 (circle)\n cardIcon:\n icon:\n lib: antd\n icon: app-store\n theme: outlined\n color: var(--theme-blue-color)\n bgColor: var(--theme-blue-background)\n shape: circle\n - brick: eo-info-card-item\n properties:\n cardTitle: 方形图标 (square)\n cardIcon:\n icon:\n lib: antd\n icon: app-store\n theme: outlined\n color: var(--theme-purple-color)\n bgColor: var(--theme-purple-background)\n shape: square\n - brick: eo-info-card-item\n properties:\n cardTitle: 圆角方形图标 (round-square)\n cardIcon:\n icon:\n lib: antd\n icon: app-store\n theme: outlined\n color: var(--theme-green-color)\n bgColor: var(--theme-green-background)\n shape: round-square\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 12px; width: 100%\">\n# <eo-info-card-item\n# card-title=\"圆形图标 (circle)\"\n# id=\"brick-1\"\n# ></eo-info-card-item>\n# <eo-info-card-item\n# card-title=\"方形图标 (square)\"\n# id=\"brick-2\"\n# ></eo-info-card-item>\n# <eo-info-card-item\n# card-title=\"圆角方形图标 (round-square)\"\n# id=\"brick-3\"\n# ></eo-info-card-item>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardIcon = {\n# icon: {\n# lib: \"antd\",\n# icon: \"app-store\",\n# theme: \"outlined\",\n# },\n# color: \"var(--theme-blue-color)\",\n# bgColor: \"var(--theme-blue-background)\",\n# shape: \"circle\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.cardIcon = {\n# icon: {\n# lib: \"antd\",\n# icon: \"app-store\",\n# theme: \"outlined\",\n# },\n# color: \"var(--theme-purple-color)\",\n# bgColor: \"var(--theme-purple-background)\",\n# shape: \"square\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.cardIcon = {\n# icon: {\n# lib: \"antd\",\n# icon: \"app-store\",\n# theme: \"outlined\",\n# },\n# color: \"var(--theme-green-color)\",\n# bgColor: \"var(--theme-green-background)\",\n# shape: \"round-square\",\n# };\n# </script>\n# \n```\n\n### detailList with useBrick\n\n`detailList` 中每项均可使用 `useBrick` 渲染自定义构件，`title` 显示为列标题，`desc` 在无 `useBrick` 时作为文字描述并带 tooltip。\n\n```yaml preview\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设备卡片页概览全部设备的状态\n detailList:\n - useBrick:\n brick: eo-switch\n properties:\n size: small\n value: true\n title: 是否启用\n - desc: \"7663\"\n title: 下载次数\n - desc: 90%\n title: 下载率\n - desc: 3%\n title: 失败率\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资源监控微应用\"\n# description=\"F5管理将企业F5BIG-IP设备统一管理，可在F5设备卡片页概览全部设备的状态\"\n# id=\"brick-1\"\n# ></eo-info-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cardIcon = {\n# color: \"blue\",\n# icon: {\n# icon: \"chart-pie\",\n# lib: \"fa\",\n# },\n# };\n# brick_1.detailList = [\n# {\n# useBrick: {\n# brick: \"eo-switch\",\n# properties: {\n# size: \"small\",\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# </script>\n# \n```\n\n### Slots\n\n使用 `icon` 插槽自定义图标，`title` 插槽在标题后追加标签，`action` 插槽放置操作按钮（点击不触发卡片跳转）。\n\n```yaml preview\n- brick: eo-info-card-item\n properties:\n style:\n width: 100%\n cardTitle: 资源监控微应用\n description: 资源监控微应用相关前后台\n detailList:\n - desc: 7M\n title: 大小\n - desc: \"863\"\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 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 danger: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-info-card-item\n# style=\"width: 100%\"\n# card-title=\"资源监控微应用\"\n# description=\"资源监控微应用相关前后台\"\n# id=\"brick-1\"\n# >\n# <eo-tag slot=\"title\" color=\"blue\">生产</eo-tag>\n# <eo-dropdown-actions slot=\"action\" actions=\"[object Object],[object Object]\">\n# <eo-button type=\"text\" icon=\"[object Object]\" size=\"small\"></eo-button>\n# </eo-dropdown-actions>\n# </eo-info-card-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.detailList = [\n# {\n# desc: \"7M\",\n# title: \"大小\",\n# },\n# {\n# desc: \"863\",\n# title: \"下载次数\",\n# },\n# ];\n# </script>\n# \n```\n"
22
22
  },
23
23
  "eo-humanize-time": {
24
- "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"
24
+ "doc": "---\ntagName: eo-humanize-time\ndisplayName: EoHumanizeTime\ndescription: 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。\ncategory: \"\"\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-humanize-time\n\n> 人性化时间展示，可显示完整时间、相对时间、未来时间、耗时等，支持自定义输入值格式和输出格式。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------------- | --------------------------------------------------------------------------------- | ---- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| value | `number \\| string` | 是 | - | 时间戳（秒或毫秒，由 `isMillisecond` 决定），或时间字符串（字符串类型时应提供 `inputFormat`） |\n| formatter | `\"full\" \\| \"default\" \\| \"relative\" \\| \"past\" \\| \"future\" \\| \"accurate\" \\| \"auto\"` | 否 | `\"auto\"` | 格式类型：`\"full\"` 完整时间、`\"default\"` 自动相对/完整、`\"relative\"` 相对时间（支持过去和未来）、`\"past\"` 仅过去相对时间、`\"future\"` 仅未来相对时间、`\"accurate\"` 精确耗时、`\"auto\"` 自动 |\n| isMillisecond | `boolean` | 否 | `false` | `value` 值的单位是否为毫秒，默认将 `value` 视为秒级时间戳 |\n| isCostTime | `boolean` | 否 | `false` | 是否展示为耗费时间，例如：'1 个月 20 天' |\n| inputFormat | `string` | 否 | - | 字符串类型 `value` 的解析格式，如 `\"YYYY-MM-DD\"`，[时间格式参照表](https://momentjs.com/docs/#/parsing/string-format/) |\n| outputFormat | `string` | 否 | - | 自定义输出格式，如 `\"YYYY-MM-DD HH:mm:ss\"`，设置后 `formatter` 属性无效，[时间格式参照表](https://momentjs.com/docs/#/displaying/format/) |\n| type | `\"datetime\" \\| \"date\"` | 否 | `\"datetime\"` | 使用日期+时间格式输出还是仅日期 |\n| link | `LinkInfo` | 否 | - | 将时间显示为可点击链接，`LinkInfo` — { url: 链接地址, target: 打开方式 } |\n| isMicrosecond | `boolean` | 否 | - | **已废弃**，请使用 `isMillisecond` |\n\n## Examples\n\n### Basic\n\n使用默认格式展示一个秒级时间戳。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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.value = 1714026348;\n# </script>\n# \n```\n\n### 完整时间\n\n使用 `formatter: full` 展示精确的完整时间。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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使用 `formatter: accurate` 展示精确的相对耗时。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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使用毫秒级时间戳和 `formatter: relative` 展示相对时间（如\"3 天前\"）。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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使用 `isCostTime` 将时间戳转换为易读的耗时格式（如\"1 个月 20 天\"）。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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.value = 1000;\n# </script>\n# \n```\n\n### 仅日期\n\n使用 `type: date` 只展示日期部分，不展示时间。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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\n### 自定义格式\n\n通过 `inputFormat` 解析字符串输入，通过 `outputFormat` 自定义展示格式。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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设置 `link` 将时间文本渲染为可点击链接。\n\n```yaml preview\nbrick: eo-humanize-time\nproperties:\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"
25
25
  },
26
26
  "eo-statistics-card": {
27
- "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"
27
+ "doc": "---\ntagName: eo-statistics-card\ndisplayName: WrappedEoStatisticsCard\ndescription: 统计卡片\ncategory: card-info\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-statistics-card\n\n> 统计卡片\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------------------- | --------------------------------------------------------- | ---- | ---------- | ---------------------------------------------------------------------------------------------- |\n| cardTitle | `string` | 否 | - | 卡片标题 |\n| value | `string` | 否 | - | 统计值 |\n| unit | `string` | 否 | - | 统计值单位，显示在值后方 |\n| icon | `GeneralIconProps & { color?: string; bgColor?: string }` | 否 | - | 图标，支持 GeneralIconProps 的所有字段，额外支持 `color`（图标颜色）和 `bgColor`（图标背景色） |\n| size | `\"large\" \\| \"medium\" \\| \"small\"` | 否 | `\"medium\"` | 卡片尺寸 |\n| outline | `\"border\" \\| \"background\" \\| \"none\"` | 否 | `\"border\"` | 卡片轮廓样式，`border` 显示边框，`background` 显示背景色，`none` 无轮廓 |\n| background | `string` | 否 | - | 卡片背景，支持任意 CSS background 值（颜色、渐变等） |\n| descriptionPosition | `\"bottom\" \\| \"right\"` | 否 | `\"bottom\"` | 描述信息（description slot）的位置，`bottom` 显示在值下方，`right` 显示在值右侧 |\n| valueStyle | `React.CSSProperties` | 否 | - | 统计值的自定义样式 |\n| interactable | `boolean` | 否 | - | 是否启用可互动样式（hover 高亮），适用于卡片整体可点击的场景 |\n\n## Slots\n\n| 插槽 | 说明 |\n| ------------ | ---------------------------------------------------- |\n| titlePrefix | 标题前缀，放置辅助信息 |\n| titleSuffix | 标题后缀，放置辅助信息 |\n| description | 描述信息，通常是对于统计值的描述 |\n| basicContent | 卡片右侧内容区，适合放置迷你图表，常用于小卡片 |\n| extraContent | 卡片下方内容区，适合放置图表，用于展示更多信息的场景 |\n| operator | 右上角操作区 |\n\n## Examples\n\n### Basic\n\n展示基础统计卡片，带图标和自定义值颜色，通过 `titleSuffix` 插槽添加提示。\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\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\nchildren:\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通过 `outline` 属性控制卡片轮廓样式，支持 `border`、`background` 和 `none` 三种模式。\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通过 `size` 属性控制卡片尺寸，支持 `large`、`medium`（默认）和 `small` 三种规格。\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### Description Position\n\n通过 `descriptionPosition` 控制描述内容的位置，`bottom` 显示在值下方，`right` 显示在值右侧。\n\n```yaml preview gap\n- brick: eo-statistics-card\n properties:\n cardTitle: 事件响应率\n value: \"78.3%\"\n descriptionPosition: bottom\n style:\n width: 300px\n children:\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: eo-statistics-card\n properties:\n cardTitle: 事件响应数量\n value: \"4,089\"\n descriptionPosition: right\n style:\n width: 400px\n children:\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# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"事件响应率\"\n# value=\"78.3%\"\n# description-position=\"bottom\"\n# style=\"width: 300px\"\n# >\n# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升3.45%</span>\n# </div>\n# </eo-statistics-card>\n# <eo-statistics-card\n# card-title=\"事件响应数量\"\n# value=\"4,089\"\n# description-position=\"right\"\n# style=\"width: 400px\"\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# </eo-statistics-card>\n# \n```\n\n### Background\n\n通过 `background` 属性自定义卡片背景，支持颜色、渐变等 CSS 值。\n\n```yaml preview\nbrick: eo-statistics-card\nproperties:\n cardTitle: 安全评分\n value: \"93\"\n valueStyle:\n color: \"#fff\"\n background: \"linear-gradient(135deg, #3480EA 0%, #6EABF5 100%)\"\n style:\n width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# background=\"linear-gradient(135deg, #3480EA 0%, #6EABF5 100%)\"\n# style=\"width: 300px\"\n# id=\"brick-1\"\n# ></eo-statistics-card>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.valueStyle = {\n# color: \"#fff\",\n# };\n# </script>\n# \n```\n\n### With Extra Content\n\n通过 `extraContent` 插槽在卡片下方放置图表，展示更丰富的数据信息。\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: 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: div\n slot: extraContent\n properties:\n textContent: （此处可放置图表）\n style:\n height: 60px\n display: flex\n alignItems: center\n color: var(--text-color-secondary)\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# <div slot=\"description\">\n# <span>同比上周</span>\n# <span style=\"color: var(--color-success)\">上升31.45%</span>\n# </div>\n# <div\n# slot=\"extraContent\"\n# style=\"\n# height: 60px;\n# display: flex;\n# align-items: center;\n# color: var(--text-color-secondary);\n# \"\n# >\n# （此处可放置图表）\n# </div>\n# </eo-statistics-card>\n# \n```\n\n### Interactable\n\n通过 `interactable` 属性启用可互动样式，适用于卡片整体可点击跳转的场景；通过 `operator` 插槽在右上角放置操作菜单。\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-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-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-statistics-card\n# card-title=\"安全评分\"\n# value=\"93\"\n# style=\"width: 300px\"\n# id=\"brick-2\"\n# >\n# <eo-mini-actions\n# slot=\"operator\"\n# actions=\"[object Object],[object Object]\"\n# id=\"brick-3\"\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.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.addEventListener(\"edit\", (e) => {\n# console.log(e.detail);\n# });\n# brick_3.addEventListener(\"delete\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
28
28
  },
29
29
  "eo-loading-step": {
30
- "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"
30
+ "doc": "---\ntagName: eo-loading-step\ndisplayName: EoLoadingStep\ndescription: 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。\ncategory: \"\"\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-loading-step\n\n> 加载步骤框。以全屏遮罩的形式展示多步骤加载进度，适用于系统初始化、批量操作等需要阻塞用户交互的场景。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| --------- | ------------------------- | ---- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| visible | `boolean \\| undefined` | 否 | - | 是否可见。为 `true` 时展示全屏遮罩并锁定页面滚动，为 `false` 时隐藏遮罩并恢复滚动。 |\n| width | `string \\| undefined` | 否 | - | 容器宽度，支持任意 CSS 宽度值（如 `\"400px\"`、`\"50%\"`）。不设置时使用默认宽度。 |\n| stepTitle | `string \\| undefined` | 否 | - | 步骤区域的标题文字，显示在步骤列表上方。 |\n| stepList | `StepItem[] \\| undefined` | 否 | - | 步骤列表，每项包含 `title`（显示名称）和 `key`（唯一标识）。步骤按数组顺序渲染。 |\n| curStep | `string \\| undefined` | 否 | - | 当前正在执行的步骤 `key`。key 对应的步骤显示为加载中（loading），之前的步骤显示为已完成（finished），之后的步骤显示为待执行（pending）。 |\n\n## Events\n\n| 事件 | 详情类型 | 说明 |\n| ----- | -------- | --------------------------- |\n| open | `void` | 调用 `open()` 方法后触发。 |\n| close | `void` | 调用 `close()` 方法后触发。 |\n\n## Methods\n\n| 方法 | 签名 | 说明 |\n| ----- | ------------ | --------------------------------------------------------------- |\n| open | `() => void` | 打开加载步骤框。将 `visible` 设为 `true` 并触发 `open` 事件。 |\n| close | `() => void` | 关闭加载步骤框。将 `visible` 设为 `false` 并触发 `close` 事件。 |\n\n## Examples\n\n### Basic\n\n展示一个多步骤加载进度框，`curStep` 为第二步时，第一步显示为已完成，第二步显示为加载中，其余步骤显示为待执行。\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\n### Custom Width\n\n通过 `width` 属性自定义容器宽度。\n\n```yaml preview minHeight=\"600px\"\nbrick: eo-loading-step\nproperties:\n visible: true\n width: \"480px\"\n stepTitle: 正在初始化系统\n curStep: step1\n stepList:\n - title: 正在检查环境依赖...\n key: step1\n - title: 正在加载配置文件...\n key: step2\n - title: 正在启动核心服务...\n key: step3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-loading-step\n# visible\n# width=\"480px\"\n# step-title=\"正在初始化系统\"\n# cur-step=\"step1\"\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: \"step1\",\n# },\n# {\n# title: \"正在加载配置文件...\",\n# key: \"step2\",\n# },\n# {\n# title: \"正在启动核心服务...\",\n# key: \"step3\",\n# },\n# ];\n# </script>\n# \n```\n\n### Open and Close via Methods\n\n通过按钮调用 `open()` 和 `close()` 方法控制加载步骤框的显隐，并监听 `open` 和 `close` 事件。\n\n```yaml preview minHeight=\"100px\"\nbrick: div\nchildren:\n - brick: eo-button\n properties:\n type: primary\n textContent: 打开加载框\n events:\n click:\n target: \"#loadingStep\"\n method: open\n - brick: eo-loading-step\n properties:\n id: loadingStep\n visible: false\n stepTitle: 正在批量处理数据\n curStep: task2\n stepList:\n - title: 正在读取数据源...\n key: task1\n - title: 正在处理数据...\n key: task2\n - title: 正在写入结果...\n key: task3\n events:\n open:\n action: console.log\n args:\n - 加载框已打开\n close:\n action: console.log\n args:\n - 加载框已关闭\n# -- YAML DELIMITER (1nbbm8) --\n# <div>\n# <eo-button type=\"primary\" id=\"brick-1\">打开加载框</eo-button>\n# <eo-loading-step\n# step-title=\"正在批量处理数据\"\n# cur-step=\"task2\"\n# id=\"loadingStep\"\n# ></eo-loading-step>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#loadingStep\");\n# brick.open();\n# });\n# \n# const loadingStep = document.getElementById(\"loadingStep\");\n# loadingStep.stepList = [\n# {\n# title: \"正在读取数据源...\",\n# key: \"task1\",\n# },\n# {\n# title: \"正在处理数据...\",\n# key: \"task2\",\n# },\n# {\n# title: \"正在写入结果...\",\n# key: \"task3\",\n# },\n# ];\n# loadingStep.addEventListener(\"open\", (e) => {\n# console.log(\"加载框已打开\");\n# });\n# loadingStep.addEventListener(\"close\", (e) => {\n# console.log(\"加载框已关闭\");\n# });\n# </script>\n# \n```\n"
31
31
  },
32
32
  "eo-current-time": {
33
- "doc": "构件 `eo-current-time`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-current-time\nproperties:\n format: \"YYYY-MM-DD HH:mm:ss\"\n icon:\n lib: easyops\n category: itsc-form\n icon: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-current-time format=\"YYYY-MM-DD HH:mm:ss\" id=\"brick-1\"></eo-current-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"itsc-form\",\n# icon: \"time\",\n# };\n# </script>\n# \n```\n"
33
+ "doc": "---\ntagName: eo-current-time\ndisplayName: EoCurrentTime\ndescription: 实时当前时间展示构件，每秒自动刷新，支持自定义时间格式和前置图标。\ncategory: \"\"\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-current-time\n\n> 实时当前时间展示构件，每秒自动刷新，支持自定义时间格式和前置图标。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| ------ | ------------------------------- | ---- | ----------------------- | ----------------------------------- |\n| format | `string` | 是 | `\"YYYY-MM-DD HH:mm:ss\"` | 时间格式，使用 moment.js 格式字符串 |\n| icon | `GeneralIconProps \\| undefined` | 否 | - | 前置图标，仅在时间已渲染后显示 |\n\n## Examples\n\n### Basic\n\n使用默认时间格式展示当前时间，每秒自动刷新。\n\n```yaml preview\nbrick: eo-current-time\nproperties:\n format: \"YYYY-MM-DD HH:mm:ss\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-current-time format=\"YYYY-MM-DD HH:mm:ss\"></eo-current-time>\n# \n```\n\n### With Icon\n\n在时间前面展示一个图标，图标仅在时间渲染后可见。\n\n```yaml preview\nbrick: eo-current-time\nproperties:\n format: \"YYYY-MM-DD HH:mm:ss\"\n icon:\n lib: easyops\n category: itsc-form\n icon: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-current-time format=\"YYYY-MM-DD HH:mm:ss\" id=\"brick-1\"></eo-current-time>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.icon = {\n# lib: \"easyops\",\n# category: \"itsc-form\",\n# icon: \"time\",\n# };\n# </script>\n# \n```\n\n### Custom Format\n\n使用自定义格式只展示时分秒。\n\n```yaml preview\nbrick: eo-current-time\nproperties:\n format: \"HH:mm:ss\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-current-time format=\"HH:mm:ss\"></eo-current-time>\n# \n```\n"
34
34
  },
35
35
  "eo-carousel-text": {
36
- "doc": "构件 `eo-carousel-text`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-carousel-text\nproperties:\n text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-carousel-text\n# text=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\"\n# ></eo-carousel-text>\n# \n```\n"
36
+ "doc": "---\ntagName: eo-carousel-text\ndisplayName: EoCarouselText\ndescription: 文字跑马灯构件，文本内容从右向左循环滚动展示，支持自定义速度、字体大小和字体颜色。\ncategory: \"\"\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-carousel-text\n\n> 文字跑马灯构件，文本内容从右向左循环滚动展示，支持自定义速度、字体大小和字体颜色。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| -------------- | --------------------------- | ---- | ----------------------------- | ------------------- |\n| text | `string` | 是 | `\"\"` | 展示内容 |\n| containerWidth | `CSSProperties[\"width\"]` | 否 | `\"100%\"` | 容器宽度 |\n| fontSize | `CSSProperties[\"fontSize\"]` | 否 | `\"var(--normal-font-size)\"` | 字体大小 |\n| fontColor | `CSSProperties[\"color\"]` | 否 | `\"var(--text-color-default)\"` | 字体颜色 |\n| speed | `number` | 否 | `100` | 移动速度，单位 px/s |\n\n## Examples\n\n### Basic\n\n展示默认样式的文字跑马灯。\n\n```yaml preview\nbrick: eo-carousel-text\nproperties:\n text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-carousel-text\n# text=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\"\n# ></eo-carousel-text>\n# \n```\n\n### Custom Speed\n\n调整滚动速度，使文字以更慢的速度滚动。\n\n```yaml preview\nbrick: eo-carousel-text\nproperties:\n text: 这是一段自定义速度的跑马灯文字，速度设置为每秒 50 像素。\n speed: 50\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-carousel-text\n# text=\"这是一段自定义速度的跑马灯文字，速度设置为每秒 50 像素。\"\n# speed=\"50\"\n# ></eo-carousel-text>\n# \n```\n\n### Custom Style\n\n自定义字体大小、字体颜色和容器宽度。\n\n```yaml preview\nbrick: eo-carousel-text\nproperties:\n text: 这是一段自定义样式的跑马灯文字，使用了自定义颜色和字体大小。\n fontSize: 18px\n fontColor: \"#1890ff\"\n containerWidth: 80%\n speed: 80\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-carousel-text\n# text=\"这是一段自定义样式的跑马灯文字，使用了自定义颜色和字体大小。\"\n# font-size=\"18px\"\n# font-color=\"#1890ff\"\n# container-width=\"80%\"\n# speed=\"80\"\n# ></eo-carousel-text>\n# \n```\n"
37
37
  },
38
38
  "eo-code-block": {
39
- "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"
39
+ "doc": "---\ntagName: eo-code-block\ndisplayName: WrappedEoCodeBlock\ndescription: 代码块展示构件，基于 Shiki 进行语法高亮，支持多种编程语言、亮色/暗色主题自动切换及复制功能。\ncategory: presentational\nsource: \"@next-bricks/presentational\"\n---\n\n# eo-code-block\n\n> 代码块展示构件，基于 Shiki 进行语法高亮，支持多种编程语言、亮色/暗色主题自动切换及复制功能。\n\n## Props\n\n| 属性 | 类型 | 必填 | 默认值 | 说明 |\n| -------------- | --------------------------------------- | ---- | -------- | -------------------------------------------------------------- |\n| language | `string` | 否 | - | 代码语言，用于语法高亮，例如 `javascript`、`python`、`yaml` 等 |\n| source | `string` | 否 | - | 代码内容字符串 |\n| theme | `\"auto\" \\| \"light-plus\" \\| \"dark-plus\"` | 否 | `\"auto\"` | 代码高亮主题。`auto` 跟随系统主题自动切换亮色/暗色 |\n| themeVariant | `\"default\" \\| \"elevo\"` | 否 | - | 主题变体，影响代码块的整体样式风格 |\n| showCopyButton | `boolean` | 否 | `true` | 是否展示复制按钮 |\n\n## CSS Parts\n\n| 名称 | 说明 |\n| ------- | --------------------------- |\n| pre | 包裹代码内容的 `<pre>` 元素 |\n| copy | 复制按钮 |\n| mermaid | Mermaid 图表 |\n| wrapper | code-wrapper 构件 |\n\n## Examples\n\n### Basic\n\n展示代码块的基本用法，通过 `language` 和 `source` 属性渲染带语法高亮的代码。\n\n```yaml preview\nbrick: eo-code-block\nproperties:\n language: javascript\n source: |\n function greet(name) {\n console.log(\"Hello, \" + name + \"!\");\n }\n greet(\"world\");\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"javascript\"\n# source='function greet(name) {\n# console.log(\"Hello, \" + name + \"!\");\n# }\n# greet(\"world\");\n# '\n# ></eo-code-block>\n# \n```\n\n### Multiple Languages\n\n展示对不同编程语言的语法高亮支持，包括 Python、YAML 和 Shell。\n\n```yaml preview\n- brick: eo-code-block\n properties:\n language: python\n source: |\n def greet(name):\n print(f\"Hello, {name}!\")\n\n greet(\"world\")\n- brick: eo-code-block\n properties:\n language: yaml\n source: |\n name: Alice\n age: 30\n hobbies:\n - reading\n - coding\n- brick: eo-code-block\n properties:\n language: shell\n source: |\n echo \"Hello, world!\"\n ls -la /tmp\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"python\"\n# source='def greet(name):\n# print(f\"Hello, {name}!\")\n# \n# greet(\"world\")\n# '\n# ></eo-code-block>\n# <eo-code-block\n# language=\"yaml\"\n# source=\"name: Alice\n# age: 30\n# hobbies:\n# - reading\n# - coding\n# \"\n# ></eo-code-block>\n# <eo-code-block\n# language=\"shell\"\n# source='echo \"Hello, world!\"\n# ls -la /tmp\n# '\n# ></eo-code-block>\n# \n```\n\n### Theme\n\n通过 `theme` 属性指定代码高亮主题，支持 `light-plus`（亮色）、`dark-plus`（暗色）和 `auto`（跟随系统）。\n\n```yaml preview\n- brick: eo-code-block\n properties:\n language: javascript\n theme: light-plus\n source: |\n const x = 42;\n console.log(x);\n- brick: eo-code-block\n properties:\n language: javascript\n theme: dark-plus\n source: |\n const x = 42;\n console.log(x);\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"javascript\"\n# theme=\"light-plus\"\n# source=\"const x = 42;\n# console.log(x);\n# \"\n# ></eo-code-block>\n# <eo-code-block\n# language=\"javascript\"\n# theme=\"dark-plus\"\n# source=\"const x = 42;\n# console.log(x);\n# \"\n# ></eo-code-block>\n# \n```\n\n### Theme Variant Elevo\n\n设置 `themeVariant` 为 `elevo` 以使用 Elevo 风格的代码块样式。\n\n```yaml preview\nbrick: eo-code-block\nproperties:\n language: javascript\n themeVariant: elevo\n source: |\n const greet = (name) => {\n return `Hello, ${name}!`;\n };\n console.log(greet(\"world\"));\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"javascript\"\n# theme-variant=\"elevo\"\n# source='const greet = (name) =&gt; {\n# return `Hello, ${name}!`;\n# };\n# console.log(greet(\"world\"));\n# '\n# ></eo-code-block>\n# \n```\n\n### Hide Copy Button\n\n设置 `showCopyButton` 为 `false` 隐藏复制按钮。\n\n```yaml preview\nbrick: eo-code-block\nproperties:\n language: python\n showCopyButton: false\n source: |\n for i in range(10):\n print(i)\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# language=\"python\"\n# source=\"for i in range(10):\n# print(i)\n# \"\n# ></eo-code-block>\n# \n```\n\n### CSS Parts\n\n通过 CSS Parts 自定义代码块样式，例如为 `pre` 部分设置圆角和边框，为 `copy` 按钮设置颜色。\n\n```yaml preview\n- brick: eo-code-block\n properties:\n style:\n \"--part-pre-border-radius\": \"8px\"\n language: typescript\n source: |\n interface User {\n name: string;\n age: number;\n }\n const user: User = { name: \"Alice\", age: 30 };\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-code-block\n# style=\"--part-pre-border-radius: 8px\"\n# language=\"typescript\"\n# source='interface User {\n# name: string;\n# age: number;\n# }\n# const user: User = { name: \"Alice\", age: 30 };\n# '\n# ></eo-code-block>\n# \n```\n"
40
40
  }
41
41
  }