From 94b9a66d82255269f1b27f251da1c9b49bb4753c Mon Sep 17 00:00:00 2001
From: "BugMaker.Huang" <BugMaker.Huang@1695529682694277.onaliyun.com>
Date: Mon, 1 Apr 2024 15:25:01 +0800
Subject: [PATCH] docs(message): added html source code for message

---
 docs/example/Message/demos/duration.tsx | 19 +++++++---------
 docs/example/Message/demos/loading.tsx  | 23 +++++++++----------
 docs/example/Message/demos/type.tsx     |  1 -
 public/Message/duration.html            |  9 ++++++++
 public/Message/loading.html             | 12 ++++++++++
 public/Message/type.html                | 30 +++++++++++++++++++++++++
 6 files changed, 69 insertions(+), 25 deletions(-)
 create mode 100644 public/Message/duration.html
 create mode 100644 public/Message/loading.html
 create mode 100644 public/Message/type.html

diff --git a/docs/example/Message/demos/duration.tsx b/docs/example/Message/demos/duration.tsx
index 3a440cad..3f5a8152 100644
--- a/docs/example/Message/demos/duration.tsx
+++ b/docs/example/Message/demos/duration.tsx
@@ -4,19 +4,16 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Duration() {
   return (
-    <div>
-      <Button
-        onClick={() => {
-          Message.info({ content: '这条提示将会被展示10秒...', duration: 10 });
-        }}
-        type="primary"
-      >
-        自定义提示时长
-      </Button>
-    </div>
+    <Button
+      onClick={() => {
+        Message.info({ content: '这条提示将会被展示10秒...', duration: 10 });
+      }}
+      type="primary"
+    >
+      自定义提示时长
+    </Button>
   );
 }
diff --git a/docs/example/Message/demos/loading.tsx b/docs/example/Message/demos/loading.tsx
index 2e7b5166..956af336 100644
--- a/docs/example/Message/demos/loading.tsx
+++ b/docs/example/Message/demos/loading.tsx
@@ -4,21 +4,18 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Loading() {
   return (
-    <div>
-      <Button
-        onClick={() => {
-          const messageId = Message.loading({ content: '正在加载...', duration: 0 });
-          setTimeout(() => {
-            Message.closeMessage(messageId);
-          }, 5000);
-        }}
-      >
-        显示一个loading提示
-      </Button>
-    </div>
+    <Button
+      onClick={() => {
+        const messageId = Message.loading({ content: '正在加载...', duration: 0 });
+        setTimeout(() => {
+          Message.closeMessage(messageId);
+        }, 5000);
+      }}
+    >
+      显示一个loading提示
+    </Button>
   );
 }
diff --git a/docs/example/Message/demos/type.tsx b/docs/example/Message/demos/type.tsx
index 0fdf6d49..2ce7648f 100644
--- a/docs/example/Message/demos/type.tsx
+++ b/docs/example/Message/demos/type.tsx
@@ -3,7 +3,6 @@
  */
 
 import { Button, Message } from '@banana-ui/react';
-import React from 'react';
 
 export default function Type() {
   return (
diff --git a/public/Message/duration.html b/public/Message/duration.html
new file mode 100644
index 00000000..e63e0405
--- /dev/null
+++ b/public/Message/duration.html
@@ -0,0 +1,9 @@
+<b-button type="primary">自定义提示时长</b-button>
+
+<script>
+  const button = document.querySelector('b-button');
+
+  button.addEventListener('click', () => {
+    window.BMessage.info({ content: '这条提示将会被展示10秒...', duration: 10 });
+  });
+</script>
\ No newline at end of file
diff --git a/public/Message/loading.html b/public/Message/loading.html
new file mode 100644
index 00000000..0c5597ca
--- /dev/null
+++ b/public/Message/loading.html
@@ -0,0 +1,12 @@
+<b-button type="primary">显示一个loading提示</b-button>
+
+<script>
+  const button = document.querySelector('b-button');
+
+  button.addEventListener('click', () => {
+    const messageId = window.BMessage.loading({ content: '正在加载...', duration: 0 });
+    setTimeout(() => {
+      window.BMessage.closeMessage(messageId);
+    }, 5000);
+  });
+</script>
\ No newline at end of file
diff --git a/public/Message/type.html b/public/Message/type.html
new file mode 100644
index 00000000..d9b72f2a
--- /dev/null
+++ b/public/Message/type.html
@@ -0,0 +1,30 @@
+<div style="display: flex; gap: 10px; flex-wrap: wrap;">
+  <b-button id="infoBtn" type="primary">普通提示</b-button>
+  <b-button id="successBtn" type="success">成功提示</b-button>
+  <b-button id="errorBtn" type="danger">错误提示</b-button>
+  <b-button id="warningBtn" type="warning">警告提示</b-button>
+</div>
+
+
+<script>
+  function showInfo() {
+    window.BMessage.info({ content: '一个普通提示' });
+  }
+
+  function showSuccess() {
+    window.BMessage.success({ content: '一个成功提示' });
+  }
+
+  function showError() {
+    window.BMessage.error({ content: '一个错误提示' });
+  }
+
+  function showWarning() {
+    window.BMessage.warning({ content: '一个警告提示' });
+  }
+
+  document.getElementById('infoBtn').addEventListener('click', showInfo);
+  document.getElementById('successBtn').addEventListener('click', showSuccess);
+  document.getElementById('errorBtn').addEventListener('click', showError);
+  document.getElementById('warningBtn').addEventListener('click', showWarning);
+</script>
\ No newline at end of file