适配就浏览器，header返回按钮。

package.json

@@ -93,6 +93,7 @@
     "@types/stompjs": "^2.3.9",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-legacy": "^5.4.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.18",
@@ -104,6 +105,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "fast-glob": "^3.3.2",
+    "i": "^0.3.7",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.35",
     "postcss-html": "^1.6.0",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.7"
-}
+  "version": "1.9"
+}

src/components/RealTimeMsg/index.vue

@@ -4,16 +4,16 @@
       <div class="headerTittle titleText">通知确认</div>
       <el-scrollbar class="itemScrollbar">
         <TransitionGroup name="list">
-          <div class="item" v-for="(item, index) in messages" :key="index">
+          <div v-for="(item, index) in messages" :key="index" class="item">
             <div class="itemContent">
               <div>{{ item.created }}</div>
               <div>{{ item.title }}</div>
               <div>{{ item.content }}</div>
             </div>
             <div class="btns">
-              <el-button type="primary" class="btn" @click="submit(item, index)"
-                >收到</el-button
-              >
+              <el-button class="btn" type="primary" @click="submit(item, index)"
+                >收到
+              </el-button>
             </div>
           </div>
         </TransitionGroup>
@@ -24,13 +24,13 @@
     </div>
     <div class="iconBox">
       <el-tooltip
-        effect="dark"
-        content="点击打开通知"
         :disabled="!showStatus"
+        content="点击打开通知"
+        effect="dark"
         placement="right"
         trigger="hover"
       >
-        <el-icon class="icon" :size="40" @click="changePop">
+        <el-icon :size="40" class="icon" @click="changePop">
           <Expand v-if="showStatus" />
           <Fold v-else />
         </el-icon>
@@ -53,10 +53,12 @@
       > -->
     </div>
     <div class="lightsBox">
-      <div><div class="titleText">电烙铁状态：</div></div>
-      <div class="light" :class="{ activeLight0: lightIndex == 0 }"></div>
-      <div class="light" :class="{ activeLight1: lightIndex == 1 }"></div>
-      <div class="light" :class="{ activeLight2: lightIndex == 2 }"></div>
+      <div>
+        <div class="titleText">电烙铁状态：</div>
+      </div>
+      <div :class="{ activeLight0: lightIndex == 0 }" class="light"></div>
+      <div :class="{ activeLight1: lightIndex == 1 }" class="light"></div>
+      <div :class="{ activeLight2: lightIndex == 2 }" class="light"></div>
     </div>
   </div>
 </template>
@@ -65,6 +67,7 @@
 import { useDictionaryStore } from "@/store";
 import { readMessage } from "@/api/user";
 import { emitter, EventsNames } from "@/utils/common.ts";
+
 const dictS = useDictionaryStore();
 const porps = defineProps({
   modelValue: {
@@ -151,7 +154,7 @@ onUnmounted(() => {
   ws.value.onclose();
 });
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .body {
   position: fixed;
   height: 100vh;
@@ -205,6 +208,7 @@ onUnmounted(() => {
           width: 60px;
           @include flex;
           margin-left: 20px;
+
           .btn {
             height: 100%;
             border-radius: 16px;
@@ -236,12 +240,14 @@ onUnmounted(() => {
     }
   }
 }
+
 .staticBox {
   position: fixed;
   top: 10px;
-  left: 10px;
+  left: 100px;
   display: flex;
   align-items: center;
+
   .static {
     height: 60px;
     background-color: white;
@@ -250,11 +256,13 @@ onUnmounted(() => {
     display: flex;
     align-items: center;
   }
+
   .staticBtn {
     font-size: 20px;
     margin-left: 10px;
   }
 }
+
 .activeLight0 {
   box-shadow:
     0 0 15px yellow,
@@ -262,6 +270,7 @@ onUnmounted(() => {
     0 0 35px rgb(169, 169, 89);
   background-color: yellow !important;
 }
+
 .activeLight1 {
   box-shadow:
     0 0 15px #00ff00,
@@ -269,6 +278,7 @@ onUnmounted(() => {
     0 0 35px #8ae88a;
   background-color: greenyellow !important;
 }
+
 .activeLight2 {
   box-shadow:
     0 0 15px #f44f54,
@@ -276,6 +286,7 @@ onUnmounted(() => {
     0 0 35px #f44f54;
   background-color: red !important;
 }
+
 .lightsBox {
   position: fixed;
   top: 10px;
@@ -286,6 +297,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
+
   .light {
     background-color: grey;
     height: 30px;
@@ -293,13 +305,16 @@ onUnmounted(() => {
     border-radius: 15px;
   }
 }
+
 .type1 {
   .state {
     color: green;
   }
 }
+
 .type0 {
   background-color: red !important;
+
   .titleText {
     color: white !important;
   }

vite.config.ts

@@ -7,7 +7,7 @@ import Components from "unplugin-vue-components/vite";
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 import Icons from "unplugin-icons/vite";
 import IconsResolver from "unplugin-icons/resolver";
-
+import legacyPlugin from "@vitejs/plugin-legacy";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import mockDevServerPlugin from "vite-plugin-mock-dev-server";
 
@@ -77,6 +77,10 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       UnoCSS({
         hmrTopLevelAwait: false,
       }),
+      legacyPlugin({
+        targets: ["chrome 70"], // 需要兼容的目标列表，可以设置多个
+        additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要此插件
+      }),
       // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
       AutoImport({
         // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
@@ -251,6 +255,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     },
   };
 });
+
 function updateVersion() {
   return {
     name: "update-version",