fix(Message): fix example style error

src/message/Message.tsx

@@ -232,7 +232,7 @@ const Message: React.FC<MessageProps> = (originProps) => {
 
   const getLinkContent = () => {
     if (typeof link === 'string') {
-      return <Link content={link} />;
+      return <Link theme="primary" content={link} />;
     }
     if (isObject(link)) {
       return <Link theme="primary" {...link} />;

src/message/_example/base.tsx

@@ -41,27 +41,24 @@ export default function () {
   return (
     <div className="container">
       {content.map((v, index) => (
-        <Button variant="outline" className="button" onClick={() => onClick(index)} key={index}>
+        <Button
+          block
+          size="large"
+          variant="outline"
+          theme="primary"
+          className="button"
+          onClick={() => onClick(index)}
+          key={index}
+        >
           {v}
         </Button>
       ))}
-      <Button variant="outline" className="button" onClick={() => setVisible(true)}>
+      <Button block size="large" variant="outline" theme="primary" className="button" onClick={() => setVisible(true)}>
         带按钮的通知
       </Button>
       <Message
-        closeBtn={
-          <Button
-            theme="primary"
-            variant="outline"
-            className="close-button"
-            onClick={() => {
-              setVisible(false);
-            }}
-          >
-            按钮
-          </Button>
-        }
         visible={visible}
+        link="链接"
         duration={0}
         content="这是一条带操作的消息通知"
         icon={<Icon name="notification" size={22} />}

src/message/_example/close-all.tsx

@@ -39,10 +39,10 @@ export default function () {
 
   return (
     <div className="container button-demo-closeall">
-      <Button variant="outline" className="button" onClick={openAllMessage}>
+      <Button block size="large" variant="outline" theme="primary" className="button" onClick={openAllMessage}>
         打开多个通知
       </Button>
-      <Button variant="outline" className="button" onClick={closeAllMessage}>
+      <Button block size="large" variant="outline" theme="primary" className="button" onClick={closeAllMessage}>
         关闭所有通知
       </Button>
     </div>

src/message/_example/index.tsx

@@ -10,10 +10,10 @@ export default function Demo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Message 消息通知" summary="用于轻量级反馈或提示，不会打断用户操作。 " />
-      <TDemoBlock title="01 类型" summary="弹窗内容为纯文本、标题和副标题、带输入框">
+      <TDemoBlock title="01 组件类型" summary="消息通知内容为文本、带操作按钮">
         <Base />
       </TDemoBlock>
-      <TDemoBlock title="02 状态" summary="弹窗状态为普通弹窗、警示提示弹窗、成功提示弹窗、错误提示弹窗。">
+      <TDemoBlock title="02 组件状态" summary="消息组件风格">
         <Theme />
       </TDemoBlock>
       <TDemoBlock title="03 关闭所有通知" summary="关闭所有通知">

src/message/_example/theme.tsx

@@ -59,7 +59,15 @@ export default function () {
   return (
     <div className="container">
       {contents.map((v, index) => (
-        <Button key={index} variant="outline" className="button" onClick={() => onClick(index)}>
+        <Button
+          key={index}
+          block
+          size="large"
+          variant="outline"
+          theme="primary"
+          className="button"
+          onClick={() => onClick(index)}
+        >
           {v}
         </Button>
       ))}

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -324,13 +324,13 @@ exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/loading/_example/vert.tsx 1`] = `"<div class="t-loading t-loading--center t-loading--vertical" style="font-size:20px"><svg style="animation:t-spin 0.8s linear infinite;animation-direction:normal" class="t-loading__gradient t-icon-loading" viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="1" y="1" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg><span class="t-loading__text">加载中</span></div><div class="t-loading t-loading--center t-loading--vertical" style="font-size:20px"><span style="animation:t-rotate 0.8s infinite linear;animation-timing-function:steps(12);animation-direction:normal" class="t-loading__spinner"><i class="t-loading__spinner--line t-loading__spinner--line-1"></i><i class="t-loading__spinner--line t-loading__spinner--line-2"></i><i class="t-loading__spinner--line t-loading__spinner--line-3"></i><i class="t-loading__spinner--line t-loading__spinner--line-4"></i><i class="t-loading__spinner--line t-loading__spinner--line-5"></i><i class="t-loading__spinner--line t-loading__spinner--line-6"></i><i class="t-loading__spinner--line t-loading__spinner--line-7"></i><i class="t-loading__spinner--line t-loading__spinner--line-8"></i><i class="t-loading__spinner--line t-loading__spinner--line-9"></i><i class="t-loading__spinner--line t-loading__spinner--line-10"></i><i class="t-loading__spinner--line t-loading__spinner--line-11"></i><i class="t-loading__spinner--line t-loading__spinner--line-12"></i></span><span class="t-loading__text">加载中...</span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/message/_example/base.tsx 1`] = `"<div class="container"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->纯文字的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带图标的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带关闭的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->可滚动的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带按钮的通知</span></button></div>"`;
+exports[`ssr snapshot test > ssr test src/message/_example/base.tsx 1`] = `"<div class="container"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->纯文字的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带图标的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带关闭的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->可滚动的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带按钮的通知</span></button></div>"`;
 
-exports[`ssr snapshot test > ssr test src/message/_example/close-all.tsx 1`] = `"<div class="container button-demo-closeall"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->打开多个通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->关闭所有通知</span></button></div>"`;
+exports[`ssr snapshot test > ssr test src/message/_example/close-all.tsx 1`] = `"<div class="container button-demo-closeall"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->打开多个通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->关闭所有通知</span></button></div>"`;
 
-exports[`ssr snapshot test > ssr test src/message/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Message 消息通知</h1><p class="tdesign-mobile-demo-header__summary">用于轻量级反馈或提示，不会打断用户操作。 </p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 类型</h2><p class="tdesign-mobile-demo-block__summary">弹窗内容为纯文本、标题和副标题、带输入框</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->纯文字的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带图标的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带关闭的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->可滚动的通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->带按钮的通知</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 状态</h2><p class="tdesign-mobile-demo-block__summary">弹窗状态为普通弹窗、警示提示弹窗、成功提示弹窗、错误提示弹窗。</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->普通通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->成功通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->警示通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->错误通知</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 关闭所有通知</h2><p class="tdesign-mobile-demo-block__summary">关闭所有通知</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container button-demo-closeall"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->打开多个通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->关闭所有通知</span></button></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/message/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Message 消息通知</h1><p class="tdesign-mobile-demo-header__summary">用于轻量级反馈或提示，不会打断用户操作。 </p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">消息通知内容为文本、带操作按钮</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->纯文字的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带图标的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带关闭的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->可滚动的通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->带按钮的通知</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">消息组件风格</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->普通通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->成功通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->警示通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->错误通知</span></button></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 关闭所有通知</h2><p class="tdesign-mobile-demo-block__summary">关闭所有通知</p></div><div class="tdesign-mobile-demo-block__slot"><div class="container button-demo-closeall"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->打开多个通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->关闭所有通知</span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/message/_example/theme.tsx 1`] = `"<div class="container"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->普通通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->成功通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->警示通知</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--default t-button--rectangle button"><span class="t-button__content"> <!-- -->错误通知</span></button></div>"`;
+exports[`ssr snapshot test > ssr test src/message/_example/theme.tsx 1`] = `"<div class="container"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->普通通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->成功通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->警示通知</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle button t-button--block"><span class="t-button__content"> <!-- -->错误通知</span></button></div>"`;
 
 exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `"<div class="t-navbar t-navbar--visible-animation" style="position:relative"><div class="t-navbar__content"><div class="t-navbar__left"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left t-navbar__left-arrow"><path fill="currentColor" d="M15.9144 17.5L10.4144 12L15.9144 6.50003L14.5002 5.08582L7.58594 12L14.5002 18.9142L15.9144 17.5Z"></path></svg></div><div class="t-navbar__center"><span class="t-navbar__center-title">标题文字</span></div></div></div><div class="t-navbar t-navbar--visible-animation" style="position:relative"><div class="t-navbar__content"><div class="t-navbar__left"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left t-navbar__left-arrow"><path fill="currentColor" d="M15.9144 17.5L10.4144 12L15.9144 6.50003L14.5002 5.08582L7.58594 12L14.5002 18.9142L15.9144 17.5Z"></path></svg><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="font-size:24px"><path fill="currentColor" d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"></path></svg></div><div class="t-navbar__center"><span class="t-navbar__center-title">标题文字</span></div><div class="t-navbar__right"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-ellipsis" style="font-size:24px"><path fill="currentColor" d="M3 10.5H6V13.5H3V10.5ZM10.5 10.5H13.5V13.5H10.5V10.5ZM18 10.5H21V13.5H18V10.5Z"></path></svg></div></div></div><div class="t-navbar t-navbar--visible-animation" style="position:relative"><div class="t-navbar__content"><div class="t-navbar__left"><div class="t-navbar__capsule"><div class="custom-capsule"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left custom-capsule__icon" style="font-size:20px"><path fill="currentColor" d="M15.9144 17.5L10.4144 12L15.9144 6.50003L14.5002 5.08582L7.58594 12L14.5002 18.9142L15.9144 17.5Z"></path></svg><div class="t-divider t-divider--vertical t-divider--center" role="separator"><div class="t-divider__content"></div></div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-home custom-capsule__icon" style="font-size:20px"><path fill="currentColor" d="M12 1.19824L22 9.53158V22H2V9.53158L12 1.19824ZM10 20H14V15H10V20ZM16 20H20V10.4683L12 3.80166L4 10.4683V20H8V13H16V20Z"></path></svg></div></div></div><div class="t-navbar__center"><span class="t-navbar__center-title">标题文字超...</span></div></div></div>"`;