fix: modal close when router change

src/components/layout/header/config.ts

@@ -64,6 +64,13 @@ export const headerMenuConfig: IHeaderMenu[] = [
         icon: h(FaSolidCircle),
         path: '/timeline?memory=1',
       },
+      {
+        title: '专栏',
+        path: '/notes/topics',
+        icon: h('i', {
+          className: 'icon-[mingcute--align-bottom-fill] flex center',
+        }),
+      },
     ],
   },
   {

src/providers/root/modal-stack-provider.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import { AnimatePresence, m, useAnimationControls } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { usePathname } from 'next/navigation'
 import type { Target, Transition } from 'framer-motion'
 import type { FC, PropsWithChildren, SyntheticEvent } from 'react'
 
@@ -43,6 +44,13 @@ interface ModalProps {
 
 const modalStackAtom = atom([] as (ModalProps & { id: string })[])
 
+const useDismissAllWhenRouterChange = () => {
+  const pathname = usePathname()
+  useEffect(() => {
+    actions.dismissAll()
+  }, [pathname])
+}
+
 export const useModalStack = () => {
   const id = useId()
   const currentCount = useRef(0)
@@ -97,6 +105,7 @@ const ModalStack = () => {
   const stack = useAtomValue(modalStackAtom)
 
   const isClient = useIsClient()
+  useDismissAllWhenRouterChange()
   if (!isClient) return null
 
   return (
@@ -117,9 +126,11 @@ const initialStyle: Target = {
   scale: 0.96,
   opacity: 0,
 }
+
 const modalTransition: Transition = {
   ...microReboundPreset,
 }
+
 const Modal: Component<{
   item: ModalProps & { id: string }
   index: number