fix: toast close

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

packages/kami-design/components/Icons/shared.tsx

@@ -18,3 +18,17 @@ export function FluentList16Filled(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function HumbleiconsTimes(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2"
+        d="M6 18L18 6m0 12L6 6"
+      />
+    </svg>
+  )
+}

src/components/widgets/Toast/card.tsx

@@ -1,9 +1,11 @@
 import { observer } from 'mobx-react-lite'
 import type { FC } from 'react'
 import { useRef } from 'react'
+import { toast } from 'react-toastify'
 
 import { Avatar } from '@mx-space/kami-design/components/Avatar'
 
+import { HumbleiconsTimes } from '~/../packages/kami-design/components/Icons'
 import { ImpressionView } from '~/components/biz/ImpressionView'
 import { RelativeTime } from '~/components/universal/RelativeTime'
 import { useInitialData } from '~/hooks/use-initial-data'
@@ -15,6 +17,8 @@ export const ToastCard: FC<{
   description?: string
   text?: string
   avatar?: string
+  onClick?: (e: MouseEvent) => void
+  getToastId?: () => string
 }> = observer((props) => {
   const { userStore, appStore } = store
   const isPadOrMobile = appStore.isPadOrMobile
@@ -26,6 +30,7 @@ export const ToastCard: FC<{
       trackerMessage={`Toast 曝光 - ${title} · ${description} · ${text}`}
     >
       <div
+        onClick={(e) => props.onClick?.(e.nativeEvent)}
         className="relative flex space-x-4 items-center p-4 w-full text-[12px] bg-bg-opacity overflow-hidden
     text-inherit border border-shallow border-opacity-50
     rounded-xl backdrop-filter backdrop-brightness-150 backdrop-brightness-110 backdrop-saturate-150 backdrop-blur-md
@@ -34,6 +39,17 @@ export const ToastCard: FC<{
           width: isPadOrMobile ? 'calc(100% - 16px - 16px)' : '350px',
         }}
       >
+        <div
+          role={'button'}
+          tabIndex={0}
+          className="flex items-center justify-center absolute z-10 top-2 left-2 h-4 w-4 rounded-full overflow-hidden bg-gray-6 bg-opacity-80 dark:bg-dark-100 text-dark-50 dark:text-white"
+          onClick={(e) => {
+            e.stopPropagation()
+            props.getToastId && toast.dismiss(props.getToastId())
+          }}
+        >
+          <HumbleiconsTimes />
+        </div>
         <div className="flex-shrink-0">
           <Avatar
             useRandomColor={false}

src/utils/notice.ts

@@ -132,14 +132,23 @@ export class Notice {
       action: TrackerAction.Interaction,
       label: '内嵌通知触发',
     })
-    toast(
-      React.createElement(ToastCard, { text, title, description, avatar }),
+
+    const id = toast(
+      React.createElement(ToastCard, {
+        text,
+        title,
+        description,
+        avatar,
+        getToastId: () => id,
+        onClick(e) {
+          onClick?.(e)
+          toast.dismiss(id)
+        },
+      }),
       {
         autoClose: duration,
+        closeOnClick: false,
         position: store.appUIStore.isPadOrMobile ? 'top-center' : 'top-right',
-        onClick(e) {
-          onClick?.(e.nativeEvent)
-        },
       },
     )
   }