【消息通知类 第二轮UI验收问题】添加imgDemo

Author: fengjingxuan8

src/components/notification/demos/image.md

@@ -0,0 +1,29 @@
+---
+order: 1
+title: Drawer
+desc: 抽屉组件基础用法
+---
+
+```jsx
+import React, { useState } from 'react';
+import { Notification, Button } from 'cloud-react';
+
+export default function NotificationDemo() {
+  const open = () => {
+    Notification.open({
+      title: '这里是标题',
+      content: '消息通知内容消息通知内容消息',
+      showCancelBtn: true,
+      showConfirmBtn: true,
+      img: <img alt="img" src="https://brand-guide.shuyun.com/IAM/9677a408554b.png"/>
+    //   img: <img alt="img" src="https://brand-guide.shuyun.com/IAM/3791de5591a7.jpg"/>
+    
+    });
+  }
+  return (
+    <Button onClick={open}>打开消息</Button>
+
+    
+  );
+}
+```

src/components/notification/index.md

@@ -9,16 +9,16 @@ group:
     path: /action
 ---
 
-### 何时使用
+## 何时使用
 在系统四个角显示通知提醒信息。经常用于以下情况：
 - 较为复杂的通知内容。
 - 带有交互的通知，给出用户下一步的行动点。
 - 系统主动推送。
 
 
-### API
+## API
 
-#### Drawer 基础配置项
+### Drawer 基础配置项
 
 | 属性           | 说明                    | 类型              | 默认值 
 | -------------- | ---------------------- | ----------------- | ------ |
@@ -27,6 +27,7 @@ group:
 | duration |  自动关闭的延时，单位毫秒。设为 0 时不自动关闭  |  number  |   4500  | |
 | title |  标题  |  ReactNode  |   -  | |
 | content |  内容  |  ReactNode  |   -  | |
+| img |  内容下方图片  |  ReactNode  |   -  | |
 | showCloseIcon |  是否展示右上角关闭图标  |  ReactNode  |   -  | |
 | btn |  自定义右下角按钮  |  ReactNode  |   -  | |
 | className |  自定义类名  |  string  |   -  | |
@@ -45,7 +46,7 @@ group:
 | onDetailClick     | 查看详情回调        |  function |  - |  
 
 
-### 代码演示
+## 代码演示
 
 ### 基础用法
 <embed src="@components/notification/demos/basic.md" />
@@ -58,3 +59,6 @@ group:
 
 ### 自定义样式
 <embed src="@components/notification/demos/custom.md" />
+
+### 带图片（可支持jpg、png、gif格式）
+<embed src="@components/notification/demos/image.md" />

src/components/notification/notification-body/index.js

@@ -16,6 +16,7 @@ const ICON_TYPE_MAP = {
 export default function NotificationBody({
   title,
   content,
+  img,
   duration,
   showIcon,
   iconType,
@@ -48,16 +49,30 @@ export default function NotificationBody({
   }, [dataSetId, duration]);
 
   return (
-    <section className={`${notificationPrefix} ${borderRadiusSize} ${className} ${isLightTheme && 'light-theme'}`} style={style}>
-      {icon || (
-        showIcon && <Icon className={`info-icon ${iconType}`} type={ICON_TYPE_MAP[iconType]} />
-      )}
+    <section
+      className={`${notificationPrefix} ${borderRadiusSize} ${className} ${
+        isLightTheme && 'light-theme'
+      }`}
+      style={style}
+    >
+      {icon
+        || (showIcon && (
+          <Icon
+            className={`info-icon ${iconType}`}
+            type={ICON_TYPE_MAP[iconType]}
+          />
+        ))}
       <div className={`${notificationPrefix}-content`}>
         <header>
           <p>{title}</p>
-          <Icon className="close-icon" type="close" onClick={() => close(dataSetId, placement)} />
+          <Icon
+            className="close-icon"
+            type="close"
+            onClick={() => close(dataSetId, placement)}
+          />
         </header>
         <main>{content}</main>
+        {!!img && <div className={`${notificationPrefix}-img-area`}>{img}</div>}
         {(showDetailBtn || showConfirmBtn || showCancelBtn) && (
           <footer>
             {showDetailBtn && (
@@ -82,7 +97,7 @@ export default function NotificationBody({
             )}
             {showCancelBtn && (
               <Button
-                type="normal"
+                type="secondary"
                 onClick={() => {
                   close(dataSetId, placement);
                   onClose();

src/components/notification/notification-body/index.less

@@ -94,4 +94,14 @@
     gap: 16px;
     margin-top: 20px;
   }
+  &-img-area {
+    width: 320px;
+    height: 180px;
+    margin: 20px auto;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 6px;
+    }
+  }
 }