✨feat: 添加烟花动画效果和页面语言设置 [deploy]

1411430556 · 1411430556 · commit fd5cafd875f5 · 2025-06-14T19:44:13.000+08:00
- 在index.html中将语言设置更新为zh-CN
- 在permission.js中引入烟花动画功能，并在页面刷新时触发
- 更新router.afterEach钩子以支持烟花动画效果，提升用户体验
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN">
 
 <head>
   <meta charset="UTF-8" />
diff --git a/src/layouts/components/FHeader.vue b/src/layouts/components/FHeader.vue
@@ -2,16 +2,18 @@
   import { useFullscreen } from '@vueuse/core'
   import FormDrawer from '~/components/FormDrawer.vue'
   import { useRepassword, useLogout } from '~/composables/useManager.js'
+  // import { useConfetti } from '~/composables/useConfetti.js'
+  // import { onMounted } from 'vue'
 
   /*
    * 这里面很多逻辑都在 ~/composables/useManager.js 里面
    *  */
 
-  // isFullscreen 是否全屏状态  toggle 切换全屏与退出全屏
+  // isFullscreen 是否全屏状态 toggle 切换全屏与退出全屏
   const { isFullscreen, toggle } = useFullscreen()
   // 解构出来
   const { formDrawerRef, form, rules, formRef, onSubmit, openRePasswordForm } = useRepassword()
-
+  // const { playConfettiAnimation } = useConfetti()
   // 退出登录
   const { handleLogout } = useLogout()
 
@@ -28,7 +30,21 @@
   }
 
   // 刷新页面
-  const handleRefresh = () => location.reload()
+  const handleRefresh = () => {
+    // 设置刷新标记
+    // sessionStorage.setItem('needConfetti', 'true')
+    location.reload()
+  }
+  
+  // 组件挂载时检查是否需要播放烟花
+  // onMounted(() => {
+  //   if (sessionStorage.getItem('needConfetti') === 'true') {
+  //     // 播放烟花动画
+  //     // playConfettiAnimation()
+  //     // 清除标记
+  //     sessionStorage.removeItem('needConfetti')
+  //   }
+  // })
 </script>
 
 <template>
diff --git a/src/permission.js b/src/permission.js
@@ -3,6 +3,9 @@ import { router, addRoutes } from '~/router'
 import { getToken } from '~/composables/auth.js'
 import { showFullLoading, hideFullLoading, toast } from '~/composables/util.js'
 import store from '~/store/index.js'
+import { useConfetti } from '~/composables/useConfetti.js'
+
+const { playConfettiAnimation } = useConfetti()
 
 // 全局前置守卫
 let hasGetInfo = false   // 处理点击一次菜单就会获取两次 getInfo 的问题
@@ -34,8 +37,13 @@ router.beforeEach(async (to, from, next) => {
 })
 
 // 全局后置守卫
-router.afterEach((to) => {
+router.afterEach((to, from) => {
   document.title = to.meta.title + '-商城后台管理系统'
   // 关闭全屏 loading
   hideFullLoading()
+  
+  // 只在页面刷新时触发烟花动画（页面刷新时from.name为null）
+  if (!from.name) {
+    playConfettiAnimation()
+  }
 })
