20260811165111

code/fms/fms-vue/index.html

@@ -1,13 +1,159 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>fms-vue</title>
+    <script>
+      try {
+        if (localStorage.getItem("fms-dark") === "true") {
+          document.documentElement.classList.add("dark");
+        }
+      } catch {
+        // Storage may be unavailable in restricted browser contexts.
+      }
+    </script>
+    <style>
+      :root {
+        --boot-background: #ffffff;
+        --boot-foreground: #171717;
+        --boot-border: #e5e5e5;
+        --boot-error: #dc2626;
+        --boot-accent: #863bff;
+      }
+
+      .dark {
+        --boot-background: #171717;
+        --boot-foreground: #fafafa;
+        --boot-border: #404040;
+        --boot-error: #f87171;
+        --boot-accent: #a774ff;
+      }
+
+      html,
+      body,
+      #app {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      .app-boot {
+        position: fixed;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        color: var(--boot-foreground);
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+        letter-spacing: 0;
+        background: var(--boot-background);
+      }
+
+      .app-boot__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+      }
+
+      .app-boot__mark {
+        position: relative;
+        display: grid;
+        width: 72px;
+        height: 72px;
+        place-items: center;
+      }
+
+      .app-boot__spinner {
+        position: absolute;
+        inset: 0;
+        box-sizing: border-box;
+        border: 2px solid var(--boot-border);
+        border-top-color: var(--boot-accent);
+        border-right-color: var(--boot-accent);
+        border-radius: 50%;
+        animation: app-boot-spin 900ms linear infinite;
+      }
+
+      .app-boot__logo {
+        width: 38px;
+        height: 38px;
+      }
+
+      .app-boot__message {
+        max-width: 320px;
+        margin: 0;
+        color: var(--boot-error);
+        font-size: 13px;
+        line-height: 1.5;
+        text-align: center;
+      }
+
+      .app-boot__retry {
+        height: 32px;
+        padding: 0 12px;
+        color: var(--boot-foreground);
+        font: inherit;
+        font-size: 13px;
+        cursor: pointer;
+        background: var(--boot-background);
+        border: 1px solid var(--boot-border);
+        border-radius: 6px;
+      }
+
+      .app-boot__retry:hover {
+        background: color-mix(in srgb, var(--boot-foreground) 6%, var(--boot-background));
+      }
+
+      .app-boot--error .app-boot__spinner {
+        display: none;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      @keyframes app-boot-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .app-boot__spinner {
+          animation-duration: 1400ms;
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div
+        id="app-boot"
+        class="app-boot"
+        role="status"
+        aria-label="应用加载中"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <div class="app-boot__content">
+          <div class="app-boot__mark" aria-hidden="true">
+            <span class="app-boot__spinner" aria-hidden="true"></span>
+            <img class="app-boot__logo" src="/favicon.svg" alt="" />
+          </div>
+          <p id="app-boot-message" class="app-boot__message" hidden></p>
+          <button id="app-boot-retry" class="app-boot__retry" type="button" hidden>重新加载</button>
+        </div>
+      </div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>