Skip to content

Commit 074068a

Browse files
committed
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>
1 parent 3ceb168 commit 074068a

81 files changed

Lines changed: 867 additions & 496 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
"validator": "13.15.22",
9595
"vue": "3.5.13",
9696
"vue-router": "4.5.0",
97+
"vue-sonner": "2.0.9",
9798
"xss": "1.0.15",
9899
"xterm-theme": "1.1.0",
99100
"zod": "4.3.5"

pnpm-lock.yaml

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/App.tsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,13 @@ import {
55
NConfigProvider,
66
NDialogProvider,
77
NElement,
8-
NMessageProvider,
9-
NNotificationProvider,
108
useDialog,
11-
useMessage,
12-
useNotification,
139
useThemeVars,
1410
zhCN,
1511
} from 'naive-ui'
1612
import { defineComponent, onMounted, provide, ref, watchEffect } from 'vue'
1713
import { RouterView } from 'vue-router'
14+
import { Toaster } from 'vue-sonner'
1815
import type { VNode } from 'vue'
1916

2017
import { PortalInjectKey } from '~/hooks/use-portal-element'
@@ -32,18 +29,6 @@ const Root = defineComponent({
3229

3330
setup() {
3431
onMounted(() => {
35-
const message = useMessage()
36-
const _error = message.error
37-
Object.assign(message, {
38-
error: (...rest: any[]) => {
39-
// @ts-ignore
40-
_error.apply(this, rest)
41-
throw rest[0]
42-
},
43-
})
44-
45-
window.message = message
46-
window.notification = useNotification()
4732
window.dialog = useDialog()
4833
})
4934
const $portalElement = ref<VNode | null>(null)
@@ -89,16 +74,29 @@ const App = defineComponent({
8974
}}
9075
theme={isCurrentDark ? darkTheme : lightTheme}
9176
>
92-
<NNotificationProvider>
93-
<NMessageProvider>
94-
<NDialogProvider>
95-
<AccentColorInjector />
96-
<NElement>
97-
<Root />
98-
</NElement>
99-
</NDialogProvider>
100-
</NMessageProvider>
101-
</NNotificationProvider>
77+
<Toaster
78+
position="bottom-right"
79+
theme={isCurrentDark ? 'dark' : 'light'}
80+
closeButton
81+
closeButtonPosition="top-right"
82+
gap={12}
83+
toastOptions={{
84+
classes: {
85+
toast: 'sonner-toast',
86+
title: 'sonner-title',
87+
description: 'sonner-description',
88+
actionButton: 'sonner-action-button',
89+
cancelButton: 'sonner-cancel-button',
90+
closeButton: 'sonner-close-button',
91+
},
92+
}}
93+
/>
94+
<NDialogProvider>
95+
<AccentColorInjector />
96+
<NElement>
97+
<Root />
98+
</NElement>
99+
</NDialogProvider>
102100
</NConfigProvider>
103101
)
104102
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
NInputNumber,
1010
} from 'naive-ui'
1111
import { computed, defineComponent, onMounted, ref } from 'vue'
12+
import { toast } from 'vue-sonner'
1213
import type { Image as ImageModel } from '~/models/base'
1314
import type { PropType } from 'vue'
1415

@@ -158,7 +159,7 @@ export const ImageDetailSection = defineComponent({
158159
fetchImageTasks.map((task) => {
159160
if (task.status === 'fulfilled') nextImageDimensions.push(task.value)
160161
else {
161-
message.warning(
162+
toast.warning(
162163
` 获取图片信息失败:${task.reason.src}: ${task.reason.err}`,
163164
)
164165
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
NTabs,
1616
} from 'naive-ui'
1717
import { defineComponent, onMounted, ref, watch } from 'vue'
18+
import { toast } from 'vue-sonner'
1819
import type { MetaPresetField, MetaPresetScope } from '~/models/meta-preset'
1920
import type { PropType } from 'vue'
2021

@@ -286,7 +287,7 @@ export const MetaPresetSection = defineComponent({
286287
)
287288
showJSONEditorModal.value = false
288289
} catch (error: any) {
289-
message.error(error.message)
290+
toast.error(error.message)
290291
}
291292
}}
292293
/>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ import { defineComponent, h, ref } from 'vue'
1414
import type { Image } from '@mx-space/api-client'
1515
import type { MetaPresetScope } from '~/models/meta-preset'
1616
import type { SelectOption } from 'naive-ui'
17-
import type { VNode } from 'vue'
18-
import type { PropType } from 'vue'
17+
import type { PropType, VNode } from 'vue'
1918

2019
import { ImageDetailSection } from './components/image-detail-section'
2120
import { MetaPresetSection } from './components/meta-preset-section'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { DecorationSet } from '@codemirror/view'
44
import { RangeSetBuilder, StateField } from '@codemirror/state'
55
import { Decoration, EditorView, WidgetType } from '@codemirror/view'
66

7-
const dividerPattern = /^-{3,}\s*$/
7+
const dividerPattern = /^-{3}\s*$/
88

99
class DividerWidget extends WidgetType {
1010
toDOM(_view: EditorView): HTMLElement {

src/components/ip-info/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { NPopover } from 'naive-ui'
22
import { defineComponent, ref } from 'vue'
33
import type { PopoverTrigger } from 'naive-ui'
4-
import type { VNode } from 'vue'
5-
import type { PropType } from 'vue'
4+
import type { PropType, VNode } from 'vue'
65

76
import { systemApi } from '~/api'
87

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { MapPin as LocationIcon } from 'lucide-vue-next'
2-
import { NButton, useMessage } from 'naive-ui'
2+
import { NButton } from 'naive-ui'
33
import { defineComponent, ref } from 'vue'
4+
import { toast } from 'vue-sonner'
45
import type { Amap, Regeocode } from '~/models/amap'
56
import type { PropType } from 'vue'
67

@@ -18,7 +19,6 @@ export const GetLocationButton = defineComponent({
1819
},
1920
},
2021
setup(props) {
21-
const message = useMessage()
2222
const loading = ref(false)
2323
const handleGetLocation = async () => {
2424
const GetGeo = () =>
@@ -55,13 +55,13 @@ export const GetLocationButton = defineComponent({
5555
console.error(error)
5656

5757
if (error.code == 2) {
58-
message.error('获取定位失败,连接超时')
58+
toast.error('获取定位失败,连接超时')
5959
} else {
60-
message.error('定位权限未打开')
60+
toast.error('定位权限未打开')
6161
}
6262
}
6363
} else {
64-
message.error('浏览器不支持定位')
64+
toast.error('浏览器不支持定位')
6565
}
6666
}
6767
return () => (

src/components/output-modal/normal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AnsiUp } from 'ansi_up'
33
import { EventSourcePolyfill } from 'event-source-polyfill'
44
import { NCard, NModal } from 'naive-ui'
55
import { defineComponent, ref, watch } from 'vue'
6+
import { toast } from 'vue-sonner'
67

78
import { getToken } from '~/utils'
89

@@ -49,7 +50,7 @@ export const ShellOutputNormal = defineComponent({
4950
event.onerror = (e: any) => {
5051
event.close()
5152
if (e?.data) {
52-
message.error(e.data)
53+
toast.error(e.data)
5354
} else {
5455
console.error(e)
5556
}

0 commit comments

Comments
 (0)