Merge pull request #922 from southorange1228/fea/demo

style(alert): 统一使用Space组件实现example

src/alert/_example/base.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertBase() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }

src/alert/_example/close.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertClose() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" close />
       <Alert theme="info" message="这是一条普通的消息提示" close="关闭" />
       <Alert theme="warning" message="这是一条警示消息" close="知道了" />
       <Alert theme="error" message="高危操作/出错信息提示" close={<span>自定义关闭</span>} />
-    </div>
+    </Space>
   );
 }

src/alert/_example/icon.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertIcon() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }

src/alert/_example/operation.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertOperation() {
   const operation = <span>相关操作</span>;
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" operation={operation} close />
       <Alert theme="info" message="这是一条普通的消息提示" operation={operation} close />
       <Alert theme="warning" message="这是一条警示消息" operation={operation} close />
       <Alert theme="error" message="高危操作/出错信息提示" operation={operation} close />
-    </div>
+    </Space>
   );
 }

src/alert/_example/swiper.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Alert } from 'tdesign-react';
+import { Alert, Space } from 'tdesign-react';
 
 export default function AlertBase() {
   return (
-    <div className="tdesign-demo-block-column">
+    <Space direction="vertical">
       <Alert theme="success" message="这是一条成功的消息提示" />
       <Alert theme="info" message="这是一条普通的消息提示" />
       <Alert theme="warning" message="这是一条警示消息" />
       <Alert theme="error" message="高危操作/出错信息提示" />
-    </div>
+    </Space>
   );
 }

src/alert/_example/title.jsx

@@ -3,9 +3,11 @@ import { Alert } from 'tdesign-react';
 
 export default function AlertDescription() {
   const operation = <span>相关操作</span>;
-  return (<Alert
-    message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
-    title="这是一条普通的消息提示"
-    operation={operation}
-  />);
+  return (
+    <Alert
+      message="这是一条普通的消息提示描述，这是一条普通的消息提示描述"
+      title="这是一条普通的消息提示"
+      operation={operation}
+    />
+  );
 }