feat: integrate vue-sonner for toast notifications

- Added the `vue-sonner` package to enhance user feedback through toast notifications across various components.
- Replaced existing message handling with toast notifications in components such as `ImageDetailSection`, `MetaPresetSection`, and others for improved user experience.
- Updated styles and imports to accommodate the new notification system.

These changes significantly improve the responsiveness and clarity of user interactions within the application.

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

Author: Innei

package.json

@@ -94,6 +94,7 @@
     "validator": "13.15.22",
     "vue": "3.5.13",
     "vue-router": "4.5.0",
+    "vue-sonner": "2.0.9",
     "xss": "1.0.15",
     "xterm-theme": "1.1.0",
     "zod": "4.3.5"

pnpm-lock.yaml

@@ -5,16 +5,13 @@ import {
   NConfigProvider,
   NDialogProvider,
   NElement,
-  NMessageProvider,
-  NNotificationProvider,
   useDialog,
-  useMessage,
-  useNotification,
   useThemeVars,
   zhCN,
 } from 'naive-ui'
 import { defineComponent, onMounted, provide, ref, watchEffect } from 'vue'
 import { RouterView } from 'vue-router'
+import { Toaster } from 'vue-sonner'
 import type { VNode } from 'vue'
 
 import { PortalInjectKey } from '~/hooks/use-portal-element'
@@ -32,18 +29,6 @@ const Root = defineComponent({
 
   setup() {
     onMounted(() => {
-      const message = useMessage()
-      const _error = message.error
-      Object.assign(message, {
-        error: (...rest: any[]) => {
-          // @ts-ignore
-          _error.apply(this, rest)
-          throw rest[0]
-        },
-      })
-
-      window.message = message
-      window.notification = useNotification()
       window.dialog = useDialog()
     })
     const $portalElement = ref<VNode | null>(null)
@@ -89,16 +74,29 @@ const App = defineComponent({
           }}
           theme={isCurrentDark ? darkTheme : lightTheme}
         >
-          <NNotificationProvider>
-            <NMessageProvider>
-              <NDialogProvider>
-                <AccentColorInjector />
-                <NElement>
-                  <Root />
-                </NElement>
-              </NDialogProvider>
-            </NMessageProvider>
-          </NNotificationProvider>
+          <Toaster
+            position="bottom-right"
+            theme={isCurrentDark ? 'dark' : 'light'}
+            closeButton
+            closeButtonPosition="top-right"
+            gap={12}
+            toastOptions={{
+              classes: {
+                toast: 'sonner-toast',
+                title: 'sonner-title',
+                description: 'sonner-description',
+                actionButton: 'sonner-action-button',
+                cancelButton: 'sonner-cancel-button',
+                closeButton: 'sonner-close-button',
+              },
+            }}
+          />
+          <NDialogProvider>
+            <AccentColorInjector />
+            <NElement>
+              <Root />
+            </NElement>
+          </NDialogProvider>
         </NConfigProvider>
       )
     }

src/App.tsx

@@ -9,6 +9,7 @@ import {
   NInputNumber,
 } from 'naive-ui'
 import { computed, defineComponent, onMounted, ref } from 'vue'
+import { toast } from 'vue-sonner'
 import type { Image as ImageModel } from '~/models/base'
 import type { PropType } from 'vue'
 
@@ -158,7 +159,7 @@ export const ImageDetailSection = defineComponent({
       fetchImageTasks.map((task) => {
         if (task.status === 'fulfilled') nextImageDimensions.push(task.value)
         else {
-          message.warning(
+          toast.warning(
             ` 获取图片信息失败：${task.reason.src}: ${task.reason.err}`,
           )
         }

src/components/drawer/components/image-detail-section.tsx

@@ -15,6 +15,7 @@ import {
   NTabs,
 } from 'naive-ui'
 import { defineComponent, onMounted, ref, watch } from 'vue'
+import { toast } from 'vue-sonner'
 import type { MetaPresetField, MetaPresetScope } from '~/models/meta-preset'
 import type { PropType } from 'vue'
 
@@ -286,7 +287,7 @@ export const MetaPresetSection = defineComponent({
                 )
                 showJSONEditorModal.value = false
               } catch (error: any) {
-                message.error(error.message)
+                toast.error(error.message)
               }
             }}
           />

src/components/drawer/components/meta-preset-section.tsx

@@ -14,8 +14,7 @@ import { defineComponent, h, ref } from 'vue'
 import type { Image } from '@mx-space/api-client'
 import type { MetaPresetScope } from '~/models/meta-preset'
 import type { SelectOption } from 'naive-ui'
-import type { VNode } from 'vue'
-import type { PropType } from 'vue'
+import type { PropType, VNode } from 'vue'
 
 import { ImageDetailSection } from './components/image-detail-section'
 import { MetaPresetSection } from './components/meta-preset-section'

src/components/drawer/text-base-drawer.tsx

@@ -4,7 +4,7 @@ import type { DecorationSet } from '@codemirror/view'
 import { RangeSetBuilder, StateField } from '@codemirror/state'
 import { Decoration, EditorView, WidgetType } from '@codemirror/view'
 
-const dividerPattern = /^-{3,}\s*$/
+const dividerPattern = /^-{3}\s*$/
 
 class DividerWidget extends WidgetType {
   toDOM(_view: EditorView): HTMLElement {

src/components/editor/codemirror/wysiwyg-divider.ts

@@ -1,8 +1,7 @@
 import { NPopover } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 import type { PopoverTrigger } from 'naive-ui'
-import type { VNode } from 'vue'
-import type { PropType } from 'vue'
+import type { PropType, VNode } from 'vue'
 
 import { systemApi } from '~/api'
 

src/components/ip-info/index.tsx

@@ -1,6 +1,7 @@
 import { MapPin as LocationIcon } from 'lucide-vue-next'
-import { NButton, useMessage } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
+import { toast } from 'vue-sonner'
 import type { Amap, Regeocode } from '~/models/amap'
 import type { PropType } from 'vue'
 
@@ -18,7 +19,6 @@ export const GetLocationButton = defineComponent({
     },
   },
   setup(props) {
-    const message = useMessage()
     const loading = ref(false)
     const handleGetLocation = async () => {
       const GetGeo = () =>
@@ -55,13 +55,13 @@ export const GetLocationButton = defineComponent({
           console.error(error)
 
           if (error.code == 2) {
-            message.error('获取定位失败，连接超时')
+            toast.error('获取定位失败，连接超时')
           } else {
-            message.error('定位权限未打开')
+            toast.error('定位权限未打开')
           }
         }
       } else {
-        message.error('浏览器不支持定位')
+        toast.error('浏览器不支持定位')
       }
     }
     return () => (

src/components/location/get-location-button.tsx

@@ -3,6 +3,7 @@ import { AnsiUp } from 'ansi_up'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { NCard, NModal } from 'naive-ui'
 import { defineComponent, ref, watch } from 'vue'
+import { toast } from 'vue-sonner'
 
 import { getToken } from '~/utils'
 
@@ -49,7 +50,7 @@ export const ShellOutputNormal = defineComponent({
         event.onerror = (e: any) => {
           event.close()
           if (e?.data) {
-            message.error(e.data)
+            toast.error(e.data)
           } else {
             console.error(e)
           }