feat(): rename illustrations.error-message to eo-illustration-message…

…, and support status variants

bricks/illustrations/docs/eo-illustration-message.md

@@ -0,0 +1,46 @@
+插画消息构件
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: eo-illustration-message
+properties:
+  heading: 糟糕！页面出现了一些问题
+  description: "HttpParseError: OK"
+```
+
+### Variant: internet-disconnected
+
+```yaml preview
+brick: eo-illustration-message
+properties:
+  variant: internet-disconnected
+  heading: 网络错误，请检查您的网络连接。
+```
+
+### Variant: success
+
+```yaml preview
+brick: eo-illustration-message
+properties:
+  variant: success
+  heading: 工具执行成功！
+```
+
+### Children
+
+```yaml preview
+brick: eo-illustration-message
+properties:
+  heading: 糟糕！页面出现了一些问题
+  description: "HttpParseError: OK"
+children:
+  - brick: eo-link
+    properties:
+      textContent: 回到上一页
+    events:
+      click:
+        action: history.goBack
+```

bricks/illustrations/src/error-message/index.spec.tsx

@@ -16,10 +16,10 @@ customElements.define(
   }
 );
 
-describe("illustrations.error-message", () => {
+describe("eo-illustration-image", () => {
   test("basic usage", async () => {
     const element = document.createElement(
-      "illustrations.error-message"
+      "eo-illustration-image"
     ) as ErrorMessage;
     element.variant = "internet-disconnected";
     element.errorTitle = "Oops";
@@ -68,7 +68,7 @@ describe("illustrations.error-message", () => {
 
   test("not found", async () => {
     const element = document.createElement(
-      "illustrations.error-message"
+      "eo-illustration-image"
     ) as ErrorMessage;
     element.variant = "not-found";
 
@@ -105,7 +105,7 @@ describe("illustrations.error-message", () => {
 
   test("unknown error", async () => {
     const element = document.createElement(
-      "illustrations.error-message"
+      "eo-illustration-image"
     ) as ErrorMessage;
 
     expect(element.shadowRoot).toBeFalsy();

bricks/illustrations/src/error-message/index.tsx

@@ -1,54 +1,83 @@
 import React, { useMemo } from "react";
 import { createDecorators } from "@next-core/element";
-import { ReactNextElement } from "@next-core/react-element";
+import { ReactNextElement, wrapBrick } from "@next-core/react-element";
 import "@next-core/theme";
 import { unwrapProvider } from "@next-core/utils/general";
 import { useCurrentTheme } from "@next-core/react-runtime";
-import styleText from "./styles.shadow.css";
 import type { getIllustration as _getIllustration } from "../data-providers/get-illustration";
+import type {
+  GeneralIcon,
+  GeneralIconProps,
+} from "@next-bricks/icons/general-icon";
+import styleText from "./styles.shadow.css";
 
 // Use `unwrapProvider` to get the original function of a provider
 const getIllustration = unwrapProvider<typeof _getIllustration>(
   "illustrations.get-illustration"
 );
+const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
 
 const { defineElement, property } = createDecorators();
 
 export interface ErrorMessageProps {
-  errorTitle?: string;
+  heading?: string;
   description?: string;
-  variant?: ErrorMessageVariant;
+  variant?: MessageVariant;
 }
 
-export type ErrorMessageVariant =
+export type MessageVariant = ErrorVariant | StatusVariant;
+
+export type ErrorVariant =
   | "internet-disconnected"
   | "no-permission"
   | "license-expired"
   | "not-found"
   | "search-empty"
   | "unknown-error";
 
+export type StatusVariant = "success" | "error" | "warning" | "info";
+
+interface MessageOfImage {
+  type: "image";
+  image: string | undefined;
+}
+
+interface MessageOfStatus {
+  type: "status";
+  icon: string;
+}
+
 /**
- * 构件 `illustrations.error-message`
+ * 插画消息构件
  */
 export
-@defineElement("illustrations.error-message", {
+@defineElement("eo-illustration-message", {
   styleTexts: [styleText],
+  alias: ["illustrations.error-message"],
 })
 class ErrorMessage extends ReactNextElement implements ErrorMessageProps {
   @property()
+  accessor heading: string | undefined;
+
+  /**
+   * @deprecated Use `heading` instead
+   */
+  @property()
   accessor errorTitle: string | undefined;
 
   @property()
   accessor description: string | undefined;
 
+  /**
+   * @default "unknown-error"
+   */
   @property()
-  accessor variant: ErrorMessageVariant | undefined;
+  accessor variant: MessageVariant | undefined;
 
   render() {
     return (
       <ErrorMessageComponent
-        errorTitle={this.errorTitle}
+        heading={this.heading || this.errorTitle}
         description={this.description}
         variant={this.variant}
       />
@@ -61,15 +90,17 @@ export interface ErrorMessageComponentProps extends ErrorMessageProps {
 }
 
 export function ErrorMessageComponent({
-  errorTitle,
+  heading,
   description,
   variant,
 }: ErrorMessageComponentProps) {
   const theme = useCurrentTheme();
 
-  const image = useMemo(() => {
+  const message = useMemo<MessageOfImage | MessageOfStatus>(() => {
     let category = "easyops2";
     let name: string;
+    let messageType = "error";
+    let icon: string;
     switch (variant) {
       case "internet-disconnected":
       case "no-permission":
@@ -82,19 +113,52 @@ export function ErrorMessageComponent({
         category = "exception";
         break;
       default:
-        name = "unknown-error";
+        messageType = "status";
+        switch (variant) {
+          case "success":
+            icon = "check-circle";
+            break;
+          case "error":
+            icon = "close-circle";
+            break;
+          case "warning":
+            icon = "warning";
+            break;
+          case "info":
+            icon = "exclamation-circle";
+            break;
+          default:
+            messageType = "error";
+            name = "unknown-error";
+        }
     }
-    return getIllustration({ category, name, theme });
+
+    if (messageType === "status") {
+      return {
+        type: "status",
+        icon: icon!,
+      };
+    }
+    return {
+      type: "image",
+      image: getIllustration({ category, name: name!, theme }),
+    };
   }, [variant, theme]);
 
   return (
     <>
-      <div className="image">
-        <img src={image} />
-      </div>
-      {errorTitle && <div className="title">{errorTitle}</div>}
+      {message.type === "image" ? (
+        <div className="image">
+          <img src={message.image} alt={variant} />
+        </div>
+      ) : (
+        <div className={`status ${variant}`}>
+          <WrappedIcon lib="antd" theme="filled" icon={message.icon} />
+        </div>
+      )}
+      {heading && <div className="heading">{heading}</div>}
       {description && <div className="description">{description}</div>}
-      <div className="extra">
+      <div>
         <slot />
       </div>
     </>

bricks/illustrations/src/error-message/styles.shadow.css

@@ -6,19 +6,24 @@
   padding: 48px 32px 72px;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 :host([hidden]) {
   display: none;
 }
 
-.image {
+.image,
+.success {
   margin-bottom: 24px;
 }
 
 .image img {
   max-width: 250px;
 }
 
-.title {
+.heading {
   font-size: 24px;
   line-height: 1.8;
   font-weight: var(--font-weight-500);
@@ -30,3 +35,23 @@
   line-height: 1.6;
   color: var(--color-secondary-text);
 }
+
+.status {
+  font-size: 72px;
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.error {
+  color: var(--color-error);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.info {
+  color: var(--color-info);
+}

shared/common-bricks/common-bricks.json

@@ -91,6 +91,7 @@
     "eo-time-range-picker",
     "eo-color-picker"
   ],
+  "illustrations": ["eo-illustration-message"],
   "presentational": [
     "eo-code-display",
     "eo-alert",