chore: 提示项目有破坏性更新

src/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { h } from "vue"
 import { useTheme } from "@/hooks/useTheme"
+import { resetConfigLayout } from "@/utils"
 import { ElNotification } from "element-plus"
 // 将 Element Plus 的语言设置为中文
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
@@ -13,6 +14,7 @@ initTheme()
 /** 作者小心思 */
 ElNotification({
   title: "Hello",
+  type: "success",
   message: h(
     "a",
     { style: "color: teal", target: "_blank", href: "https://github.com/un-pany/v3-admin-vite" },
@@ -21,6 +23,21 @@ ElNotification({
   duration: 0,
   position: "bottom-right"
 })
+ElNotification({
+  title: "提示",
+  type: "warning",
+  message: h(
+    "span",
+    {
+      style: "color: teal; cursor: pointer;",
+      onClick: resetConfigLayout
+    },
+    "由于平台 4.1.0 版本新增了多种布局模式，如果出现白屏情况，点击这里或手动前往控制台清理 LocalStorage 缓存数据后刷新页面即可！"
+  ),
+  duration: 0,
+  position: "bottom-right",
+  offset: 150
+})
 </script>
 
 <template>

src/layouts/components/Settings/index.vue

@@ -2,7 +2,7 @@
 import { watchEffect } from "vue"
 import { storeToRefs } from "pinia"
 import { useSettingsStore } from "@/store/modules/settings"
-import { removeConfigLayout } from "@/utils/cache/local-storage"
+import { resetConfigLayout } from "@/utils"
 import { Refresh } from "@element-plus/icons-vue"
 
 const settingsStore = useSettingsStore()
@@ -38,12 +38,6 @@ const switchSettings = {
 watchEffect(() => {
   layoutMode.value !== "left" && (fixedHeader.value = true)
 })
-
-/** 重置配置 */
-const reset = () => {
-  removeConfigLayout()
-  location.reload()
-}
 </script>
 
 <template>
@@ -59,7 +53,7 @@ const reset = () => {
       <span class="setting-name">{{ settingName }}</span>
       <el-switch v-model="settingValue.value" :disabled="layoutMode !== 'left' && settingName === '固定 Header'" />
     </div>
-    <el-button type="danger" :icon="Refresh" @click="reset">重 置</el-button>
+    <el-button type="danger" :icon="Refresh" @click="resetConfigLayout">重 置</el-button>
   </div>
 </template>
 

src/utils/index.ts

@@ -1,4 +1,5 @@
 import dayjs from "dayjs"
+import { removeConfigLayout } from "@/utils/cache/local-storage"
 
 /** 格式化时间 */
 export const formatDateTime = (time: string | number | Date) => {
@@ -25,3 +26,9 @@ export const setCssVariableValue = (cssVariableName: string, cssVariableValue: s
     console.error(error)
   }
 }
+
+/** 重置项目配置 */
+export const resetConfigLayout = () => {
+  removeConfigLayout()
+  location.reload()
+}