F

src/App.vue

@@ -7,6 +7,7 @@ import { useDialogStore } from "@/stores/dialogStore";
 import { useAuthStore } from "@/stores/authStore";
 import { useWeixinShare } from "@/composables/useWeixinShare";
 import WechatOverlay from "@/components/WechatOverlay.vue";
+import MaintenanceDialog from "@/components/MaintenanceDialog.vue";
 
 const router = useRouter();
 const agentStore = useAgentStore();
@@ -209,6 +210,7 @@ const h5WeixinGetCode = () => {
 
     <WechatOverlay />
     <BindPhoneDialog />
+    <MaintenanceDialog />
 </template>
 
 <style scoped></style>

src/components/MaintenanceDialog.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { onMounted, ref } from "vue";
+
+const showMaintenance = ref(false);
+
+onMounted(() => {
+    // 每次访问网址时显示全屏维护遮罩，遮挡所有页面
+    showMaintenance.value = true;
+});
+</script>
+
+<template>
+    <!-- 全屏维护遮罩：固定覆盖整个视口，置于最顶层，阻挡所有页面操作 -->
+    <Teleport to="body">
+        <Transition name="maintenance-fade">
+            <div
+                v-show="showMaintenance"
+                class="maintenance-overlay"
+                aria-hidden="false"
+            >
+                <div class="maintenance-card">
+                    <div class="dialog-header">
+                        <div class="title">系统升级维护公告</div>
+                    </div>
+                    <div class="dialog-content">
+                        <p class="content-text">
+                            为进一步提升系统稳定性与服务效能，我单位正在进行后台升级改造。
+                        </p>
+                        <p class="content-text">
+                            维护期间，相关功能模块将暂时无法使用。​ 由此给您带来的不便，敬请谅解。感谢您一直以来的理解与支持！
+                        </p>
+                    </div>
+                    <div class="dialog-footer">
+                        <span class="ack-text">感谢您的理解与支持</span>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.maintenance-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.85);
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.maintenance-card {
+    width: 100%;
+    max-width: 520px;
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.dialog-header {
+    padding: 24px 24px 16px;
+    text-align: center;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+}
+
+.dialog-content {
+    padding: 24px;
+    min-height: 120px;
+}
+
+.content-text {
+    font-size: 15px;
+    line-height: 1.8;
+    color: #555;
+    margin: 12px 0;
+    text-align: left;
+}
+
+.dialog-footer {
+    padding: 20px 24px 24px;
+    text-align: center;
+}
+
+.ack-text {
+    font-size: 14px;
+    color: #888;
+}
+
+.maintenance-fade-enter-active,
+.maintenance-fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.maintenance-fade-enter-from,
+.maintenance-fade-leave-to {
+    opacity: 0;
+}
+</style>

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
         strictPort: true, // 如果端口被占用则抛出错误而不是使用下一个可用端口
         proxy: {
             "/api/v1": {
-                target: "http://127.0.0.1:8888", // 本地接口地址
+                // target: "http://127.0.0.1:8888", // 本地接口地址
-                // target: "https://www.tianyuandb.com", // 本地接口地址
+                target: "https://www.tianyuandb.com", // 本地接口地址
                 changeOrigin: true,
             },
         },