jiawei/OCS_service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 vue-sonner，优化反馈

Browse Source
This commit is contained in:
Marcus
2026-05-23 14:37:53 +08:00
parent 7d68db723b
commit e317e117d9
9 changed files with 141 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
+16 -3
View File
@@ -1,5 +1,18 @@
<script setup lang="ts">
import "vue-sonner/style.css";
import { Toaster } from "vue-sonner";
import { useGlobalStore } from "@/stores/global";
const themeStore = useGlobalStore();
</script>
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<div>
<Toaster position="top-center" :theme="themeStore.toasterTheme" />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
app/components/layout/AppHeader.vue
+6 -9
View File
@@ -12,14 +12,10 @@ import {
import { Button } from "@/components/ui/button";
import { useAuthStore } from "@/stores/auth";
import { useGlobalStore } from "@/stores/global";
/** 使用 VueUse 的 useColorMode 切换 dark/light，class 会挂到 <html> 上 */
const colorMode = useColorMode();
const isDark = computed(() => colorMode.value === "dark");
const toggleColorMode = () => {
colorMode.value = isDark.value ? "light" : "dark";
};
/** 主题状态由 themeStore 统一管理，持久化由 @nuxtjs/color-mode 处理 */
const themeStore = useGlobalStore();
const authStore = useAuthStore();
@@ -45,6 +41,7 @@ const isActive = (to: string) => {
return route.path.startsWith(to);
};
// 退出登录
const handleSignOut = async () => {
await authStore.signOut();
await navigateTo("/login");
@@ -93,9 +90,9 @@ const handleSignOut = async () => {
variant="ghost"
size="icon"
aria-label="切换主题"
@click="toggleColorMode"
@click="themeStore.toggle"
>
<Sun v-if="isDark" class="size-4" />
<Sun v-if="themeStore.isDark" class="size-4" />
<Moon v-else class="size-4" />
</Button>
app/components/ui/sonner/Sonner.vue
+55
View File
@@ -0,0 +1,55 @@
<script lang="ts" setup>
import type { ToasterProps } from 'vue-sonner'
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
XIcon,
} from '@lucide/vue'
import { Toaster as Sonner } from 'vue-sonner'
import { cn } from '@/lib/utils'
const props = defineProps<ToasterProps>()
</script>
<template>
<Sonner
:class="cn('toaster group', props.class)"
:style="{
'--normal-bg': 'var(--popover)',
'--normal-text': 'var(--popover-foreground)',
'--normal-border': 'var(--border)',
'--border-radius': 'var(--radius)',
}"
:toast-options="{
classes: {
toast: 'rounded-2xl',
},
}"
v-bind="props"
>
<template #success-icon>
<CircleCheckIcon class="size-4" />
</template>
<template #info-icon>
<InfoIcon class="size-4" />
</template>
<template #warning-icon>
<TriangleAlertIcon class="size-4" />
</template>
<template #error-icon>
<OctagonXIcon class="size-4" />
</template>
<template #loading-icon>
<div>
<Loader2Icon class="size-4 animate-spin" />
</div>
</template>
<template #close-icon>
<XIcon class="size-4" />
</template>
</Sonner>
</template>
app/components/ui/sonner/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Toaster } from './Sonner.vue'
app/stores/answer.ts
+8
View File
@@ -1,5 +1,6 @@
// app/stores/answer.ts - 答题页和 Dashboard 的统一状态管理
import { defineStore } from "pinia";
import { toast } from "vue-sonner";
import type {
IHealthResponse,
@@ -133,8 +134,10 @@ export const useAnswerStore = defineStore("answer", () => {
}
searchErrorMessage.value = res.data.msg || "答题失败";
toast.error(searchErrorMessage.value);
} catch (error) {
searchErrorMessage.value = getClientErrorMessage(error, "服务器内部错误");
toast.error(searchErrorMessage.value);
} finally {
searchLoading.value = false;
}
@@ -150,6 +153,7 @@ export const useAnswerStore = defineStore("answer", () => {
error,
"健康检查失败"
);
toast.error(dashboardErrorMessage.value);
}
};
@@ -164,6 +168,7 @@ export const useAnswerStore = defineStore("answer", () => {
error,
"统计信息读取失败"
);
toast.error(dashboardErrorMessage.value);
} finally {
statsLoading.value = false;
}
@@ -186,6 +191,7 @@ export const useAnswerStore = defineStore("answer", () => {
error,
"问答记录读取失败"
);
toast.error(dashboardErrorMessage.value);
} finally {
recordsLoading.value = false;
}
@@ -204,12 +210,14 @@ export const useAnswerStore = defineStore("answer", () => {
try {
await AnswerService.clearCache();
toast.success("缓存已清空");
await Promise.allSettled([getStats(), getRecords(1)]);
} catch (error) {
dashboardErrorMessage.value = getClientErrorMessage(
error,
"缓存清理失败"
);
toast.error(dashboardErrorMessage.value);
} finally {
cacheClearing.value = false;
}
app/stores/auth.ts
+11
View File
@@ -1,5 +1,6 @@
// app/stores/auth.ts - 用户登录状态管理
import { defineStore } from "pinia";
import { toast } from "vue-sonner";
import { authClient } from "@/utils/auth";
@@ -79,6 +80,7 @@ export const useAuthStore = defineStore("auth", () => {
const result = await authClient.signIn.email({ email, password });
if (result.error) {
error.value = "邮箱或密码错误";
toast.error(error.value);
return false;
}
// 直接使用登录响应中的用户数据，无需重复请求 get-session
@@ -87,9 +89,11 @@ export const useAuthStore = defineStore("auth", () => {
result.data.user as Parameters<typeof _setUserFromResult>[0]
);
}
toast.success("登录成功");
return true;
} catch {
error.value = "登录失败，请重试";
toast.error(error.value);
return false;
} finally {
loading.value = false;
@@ -104,6 +108,7 @@ export const useAuthStore = defineStore("auth", () => {
const result = await authClient.signUp.email({ name, email, password });
if (result.error) {
error.value = "注册失败，邮箱可能已被使用";
toast.error(error.value);
return false;
}
if (result.data?.user) {
@@ -111,9 +116,11 @@ export const useAuthStore = defineStore("auth", () => {
result.data.user as Parameters<typeof _setUserFromResult>[0]
);
}
toast.success("注册成功");
return true;
} catch {
error.value = "注册失败，请重试";
toast.error(error.value);
return false;
} finally {
loading.value = false;
@@ -125,6 +132,7 @@ export const useAuthStore = defineStore("auth", () => {
await authClient.signOut();
user.value = null;
initialized.value = false;
toast.success("已退出登录");
};
/** 刷新当前用户的 apiToken；成功后同步更新 store */
@@ -139,12 +147,15 @@ export const useAuthStore = defineStore("auth", () => {
}>("/api/user/refresh-token", { method: "POST" });
if (res.code === 0 && res.data?.apiToken && user.value) {
user.value = { ...user.value, apiToken: res.data.apiToken };
toast.success("Token 已刷新");
return true;
}
error.value = res.msg || "刷新失败";
toast.error(error.value);
return false;
} catch {
error.value = "刷新失败，请重试";
toast.error(error.value);
return false;
} finally {
loading.value = false;
app/stores/global.ts
+20
View File
@@ -0,0 +1,20 @@
// app/stores/global.ts - 全局通用状态（主题等），持久化由 @nuxtjs/color-mode 统一管理（localStorage/cookie）
export const useGlobalStore = defineStore("theme", () => {
// useColorMode 会自动读写持久化存储，class 也由其挂到 <html>
const colorMode = useColorMode();
/** 当前是否深色模式 */
const isDark = computed(() => colorMode.value === "dark");
/** 切换深色 / 浅色 */
const toggle = () => {
colorMode.value = isDark.value ? "light" : "dark";
};
/** vue-sonner Toaster 的 theme prop 值，跟随当前模式 */
const toasterTheme = computed<"light" | "dark">(() =>
isDark.value ? "dark" : "light"
);
return { isDark, toggle, toasterTheme };
});
package.json
+1
View File
@@ -39,6 +39,7 @@
"vite-svg-loader": "^5.1.1",
"vue": "^3.5.34",
"vue-router": "^5.0.7",
"vue-sonner": "^2.0.9",
"zod": "3.25.76"
},
"devDependencies": {
pnpm-lock.yaml
Generated
+23
View File
@@ -95,6 +95,9 @@ importers:
vue-router:
specifier: ^5.0.7
version: 5.0.7(@vue/compiler-sfc@3.5.34)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3))
vue-sonner:
specifier: ^2.0.9
version: 2.0.9(@nuxt/kit@4.4.6(magicast@0.5.3))(@nuxt/schema@4.4.6)(nuxt@4.4.6(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@electric-sql/pglite@0.4.1)(@parcel/watcher@2.5.6)(@types/node@24.12.4)(@vue/compiler-sfc@3.5.34)(cac@6.7.14)(db0@0.3.4(@electric-sql/pglite@0.4.1)(mysql2@3.15.3))(eslint@10.4.0(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.3)(mysql2@3.15.3)(optionator@0.9.4)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))(rollup-plugin-visualizer@7.0.1(rollup@4.60.4))(rollup@4.60.4)(srvx@0.11.15)(stylus@0.57.0)(terser@5.47.1)(typescript@6.0.3)(vite@7.3.3(@types/node@24.12.4)(jiti@2.7.0)(lightningcss@1.32.0)(stylus@0.57.0)(terser@5.47.1)(yaml@2.9.0))(yaml@2.9.0))
zod:
specifier: 3.25.76
version: 3.25.76
@@ -5838,6 +5841,20 @@ packages:
pinia:
optional: true
vue-sonner@2.0.9:
resolution: {integrity: sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==}
peerDependencies:
'@nuxt/kit': ^4.0.3
'@nuxt/schema': ^4.0.3
nuxt: ^4.0.3
peerDependenciesMeta:
'@nuxt/kit':
optional: true
'@nuxt/schema':
optional: true
nuxt:
optional: true
vue@3.5.34:
resolution: {integrity: sha512-WdLBG9gm02OgJIG9axd5Hpx0TFLdzVgfG2evFFu8Rur5O/IoGc5cMjnjh3tPL6GnRGsYvUhBSKVPYVcxRKpMCA==}
peerDependencies:
@@ -11862,6 +11879,12 @@ snapshots:
'@vue/compiler-sfc': 3.5.34
pinia: 3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
vue-sonner@2.0.9(@nuxt/kit@4.4.6(magicast@0.5.3))(@nuxt/schema@4.4.6)(nuxt@4.4.6(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@electric-sql/pglite@0.4.1)(@parcel/watcher@2.5.6)(@types/node@24.12.4)(@vue/compiler-sfc@3.5.34)(cac@6.7.14)(db0@0.3.4(@electric-sql/pglite@0.4.1)(mysql2@3.15.3))(eslint@10.4.0(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.3)(mysql2@3.15.3)(optionator@0.9.4)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))(rollup-plugin-visualizer@7.0.1(rollup@4.60.4))(rollup@4.60.4)(srvx@0.11.15)(stylus@0.57.0)(terser@5.47.1)(typescript@6.0.3)(vite@7.3.3(@types/node@24.12.4)(jiti@2.7.0)(lightningcss@1.32.0)(stylus@0.57.0)(terser@5.47.1)(yaml@2.9.0))(yaml@2.9.0)):
optionalDependencies:
'@nuxt/kit': 4.4.6(magicast@0.5.3)
'@nuxt/schema': 4.4.6
nuxt: 4.4.6(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@electric-sql/pglite@0.4.1)(@parcel/watcher@2.5.6)(@types/node@24.12.4)(@vue/compiler-sfc@3.5.34)(cac@6.7.14)(db0@0.3.4(@electric-sql/pglite@0.4.1)(mysql2@3.15.3))(eslint@10.4.0(jiti@2.7.0))(ioredis@5.10.1)(lightningcss@1.32.0)(magicast@0.5.3)(mysql2@3.15.3)(optionator@0.9.4)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)))(rollup-plugin-visualizer@7.0.1(rollup@4.60.4))(rollup@4.60.4)(srvx@0.11.15)(stylus@0.57.0)(terser@5.47.1)(typescript@6.0.3)(vite@7.3.3(@types/node@24.12.4)(jiti@2.7.0)(lightningcss@1.32.0)(stylus@0.57.0)(terser@5.47.1)(yaml@2.9.0))(yaml@2.9.0)
vue@3.5.34(typescript@6.0.3):
dependencies:
'@vue/compiler-dom': 3.5.34