feat(v0.3): QR connect (M5) + PWA installable (M4)

- M5: 📱 toolbar button → modal with a client-side QR of location.origin
  (shareable when opened via the LAN IP) + localhost tip
- M4: manifest.webmanifest + icon.svg + sw.js (network-first, never intercepts
  /term or /hook) + registration in main.ts; apple-touch + theme-color meta
- Browser-verified: QR canvas renders, SW 'controlled', manifest linked,
  no console errors. 199 tests green, build ok.
This commit is contained in:
Yaojia Wang
2026-06-17 18:32:57 +02:00
parent eaeacf3a78
commit fbc218c57f
7 changed files with 180 additions and 1 deletions

View File

@@ -107,6 +107,52 @@ html, body {
background: #555;
}
/* QR connect modal (M5) */
#qrmodal {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
}
.qr-card {
background: #fff;
color: #111;
border-radius: 12px;
padding: 20px;
text-align: center;
max-width: 90vw;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.qr-title {
font-weight: 600;
margin-bottom: 12px;
}
.qr-url {
margin-top: 10px;
font-size: 13px;
color: #333;
word-break: break-all;
}
.qr-note {
margin-top: 8px;
font-size: 12px;
color: #666;
max-width: 240px;
}
.qr-close {
margin-top: 14px;
padding: 6px 18px;
border: none;
border-radius: 6px;
background: #1a1a1a;
color: #fff;
cursor: pointer;
font: inherit;
}
.tab {
display: flex;
align-items: center;