rebuild(stage-4): deliver shared shell and account interfaces

2026-07-30 02:08:20 +08:00
parent d1c658d8ef
commit 3b75bf2d63
47 changed files with 3042 additions and 99 deletions
@@ -0,0 +1,152 @@
+@media (max-width: 1023px) {
+  .dialog-backdrop {
+    align-items: end;
+    padding: 0;
+  }
+
+  .dialog,
+  .dialog-wide {
+    width: 100%;
+    max-height: calc(100vh - var(--s-44));
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+
+  .btn,
+  .icon-button {
+    min-height: var(--touch-height);
+  }
+
+  .icon-button {
+    width: var(--touch-height);
+  }
+
+  .membership-lock {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .app-shell {
+    padding-left: 0;
+    padding-bottom: var(--shell-mobile-nav-height);
+  }
+
+  .sidebar,
+  .statusbar,
+  .desktop-only,
+  .market-details {
+    display: none;
+  }
+
+  .topbar {
+    gap: var(--s-8);
+    padding: 0 var(--s-10);
+  }
+
+  .topbar-title {
+    font-size: var(--font-13);
+  }
+
+  .identity-cluster .tag,
+  .account-name,
+  .date-control .icon-button {
+    display: none;
+  }
+
+  .mobile-account-label {
+    display: inline;
+  }
+
+  .market-strip-row {
+    gap: var(--s-12);
+    overflow-x: auto;
+    padding-right: var(--s-10);
+    padding-left: var(--s-10);
+    white-space: nowrap;
+  }
+
+  .market-toggle {
+    display: none;
+  }
+
+  .page-frame {
+    min-height: calc(100vh - var(--shell-topbar-height) - var(--shell-summary-height) - var(--shell-mobile-nav-height));
+    padding: var(--s-12) var(--s-10);
+  }
+
+  .page-header {
+    align-items: flex-start;
+    gap: var(--s-4);
+    flex-direction: column;
+  }
+
+  .mobile-nav {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-mobile-nav);
+    height: var(--shell-mobile-nav-height);
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    padding-bottom: env(safe-area-inset-bottom);
+    border-top: var(--s-1) solid var(--color-border);
+    background: var(--color-surface);
+  }
+
+  .mobile-nav-item {
+    min-width: 0;
+    display: grid;
+    place-items: center;
+    color: var(--color-text-secondary);
+    font-size: var(--font-11);
+  }
+
+  .mobile-nav-item.router-link-active {
+    color: var(--color-primary);
+    font-weight: var(--weight-600);
+  }
+
+  .status-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .comparison-row {
+    grid-template-columns: minmax(0, 1fr) var(--s-64) var(--s-64);
+  }
+
+  .auth-view {
+    align-items: start;
+    padding-top: var(--s-34);
+  }
+
+  .auth-panel {
+    box-shadow: none;
+  }
+
+  .system-header,
+  .system-header > div:first-child {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .system-tabs {
+    width: 100%;
+    margin-left: 0;
+    overflow-x: auto;
+  }
+
+  .system-grid,
+  .model-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .credential-row,
+  .selection-grid {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .member-editor {
+    position: static;
+  }
+}