workspace/code/fms/fms-vue/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FMS - 数字化管理系统</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      /* ===== 开屏加载屏（对齐 cool-admin：深色底 + 旋转 spinner + 文字淡入，全合成层友好） ===== */
      .app-boot {
        display: flex;
        flex-direction: column;
        background-color: #2f3447;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 9999;
        transition: opacity 0.3s ease-in;
        opacity: 1;
        pointer-events: none;
        /* 锁定字体，避免 Vue 注入的 web 字体就绪后替换导致文字重定位抖动 */
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
          "Microsoft YaHei", sans-serif;
      }

      .app-boot--hide {
        opacity: 0;
      }

      .app-boot--error {
        background: radial-gradient(circle at 50% 50%, #fef2f2 0%, #fee2e2 100%);
        color: #b91c1c;
      }

      .app-boot__container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        user-select: none;
        -webkit-user-select: none;
        flex-grow: 1;
      }

      .app-boot__name {
        font-size: 30px;
        color: #fff;
        letter-spacing: 5px;
        font-weight: bold;
        margin-bottom: 24px;
        min-height: 50px;
        white-space: nowrap;
        line-height: 1.2;
      }

      .app-boot__sub-title {
        color: #ababab;
        font-size: 12px;
        min-height: 20px;
        margin-top: 16px;
      }

      .app-boot__name,
      .app-boot__title,
      .app-boot__sub-title {
        animation: app-boot-fade 0.5s ease-in;
      }

      @keyframes app-boot-fade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* 旋转加载圈：transform 旋转 + color 渐变，均合成/轻量，不掉帧 */
      .app-boot__loading {
        height: 44px;
        width: 44px;
        border-radius: 30px;
        border: 7px solid currentColor;
        border-bottom-color: #2f3447;
        position: relative;
        color: #689cc5;
        transform: rotate(0deg);
        animation:
          app-boot-spin 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
          app-boot-color 2s infinite ease-in;
      }

      @keyframes app-boot-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .app-boot__loading::after,
      .app-boot__loading::before {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: -2px;
        height: 7px;
        width: 7px;
        border-radius: 10px;
        background-color: currentColor;
      }

      .app-boot__loading::after {
        left: -1px;
      }

      .app-boot__loading::before {
        right: -1px;
      }

      @keyframes app-boot-color {
        0% {
          color: #689cc5;
        }
        25% {
          color: #b3b7e2;
        }
        50% {
          color: #93dbe9;
        }
        75% {
          color: #abbd81;
        }
        100% {
          color: #689cc5;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .app-boot__loading {
          animation: none;
        }
      }
    </style>
  </head>

  <body>
    <div id="app">
      <script>
        // 模块加载失败时（如直接 file:// 打开）展示错误，避免永远卡在加载屏
        window.addEventListener('error', (e) => {
          const app = document.getElementById('app')
          if (app) {
            app.innerHTML =
              '<div id="app-boot-error" class="app-boot app-boot--error" style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-family:sans-serif">' +
              '<div style="font-size:20px;font-weight:bold">加载失败</div>' +
              '<div style="font-size:14px">请通过本地开发服务器访问（如 npm run dev），不要直接以 file:// 方式打开本文件。</div>' +
              (e && e.message ? '<div style="font-size:12px;opacity:.7">' + e.message + '</div>' : '') +
              '</div>'
          }
        })
      </script>
    </div>

    <div id="app-boot" class="app-boot">
      <div class="app-boot__container">
        <div class="app-boot__name">FMS</div>
        <div class="app-boot__loading"></div>
        <div class="app-boot__sub-title">正在加载，请稍候…</div>
      </div>
    </div>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>