feat(console): adapt main console for mobile screens

Stack the console layout vertically on smaller screens, wrap the action toolbar, collapse file rows into compact mobile cards, and make the bottom console, modal, and toast areas usable on phones without desktop splitters.
2026-08-01 08:26:50 +08:00
parent 578cff6dc2
commit 69badb6853
1 changed files with 209 additions and 0 deletions
@@ -55,6 +55,10 @@
            overflow: hidden;
        }

+        .mobile-only {
+            display: none;
+        }
+
        /* --- Splitter / Resizer --- */
        .resizer-horizontal {
            height: 4px;
@@ -286,7 +290,9 @@

        .actions {
            display: flex;
+            flex-wrap: wrap;
            gap: 12px;
+            justify-content: flex-end;
        }

        .btn {
@@ -710,6 +716,209 @@
        ::-webkit-scrollbar-thumb:hover {
            background: #52525b;
        }
+
+        @media (max-width: 900px) {
+            body {
+                height: auto;
+                min-height: 100vh;
+                overflow: auto;
+                grid-template-rows: auto auto;
+            }
+
+            .main-area {
+                grid-template-columns: 1fr;
+                min-height: auto;
+            }
+
+            .sidebar {
+                min-width: 0 !important;
+                max-height: none;
+                border-bottom: 1px solid var(--bg-border);
+            }
+
+            .content-area {
+                min-width: 0 !important;
+            }
+
+            .resizer-vertical,
+            .resizer-horizontal {
+                display: none;
+            }
+
+            .section-header,
+            .status-main,
+            .fm-toolbar,
+            .file-header,
+            .file-row,
+            .console-header,
+            .console-logs,
+            .modal-header,
+            .modal-body,
+            .modal-footer {
+                padding-left: 14px;
+                padding-right: 14px;
+            }
+
+            .status-main {
+                align-items: flex-start;
+                gap: 12px;
+            }
+
+            .item-info {
+                min-width: 0;
+                flex: 1;
+            }
+
+            .item-title,
+            .item-sub,
+            .file-name,
+            .log-msg,
+            .toast-msg {
+                word-break: break-word;
+            }
+
+            .fm-toolbar {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+                position: sticky;
+                top: 0;
+                z-index: 20;
+            }
+
+            .breadcrumb {
+                overflow-x: auto;
+                white-space: nowrap;
+                padding-bottom: 4px;
+            }
+
+            .actions {
+                justify-content: stretch;
+                gap: 8px;
+            }
+
+            .actions .btn,
+            .actions a.btn,
+            .console-header .btn {
+                flex: 1 1 calc(50% - 4px);
+                min-height: 40px;
+                justify-content: center;
+                text-align: center;
+                white-space: normal;
+            }
+
+            .file-header {
+                display: none;
+            }
+
+            .file-row {
+                grid-template-columns: 28px 1fr auto;
+                gap: 10px;
+                padding-top: 14px;
+                padding-bottom: 14px;
+            }
+
+            .file-row > :nth-child(3) {
+                grid-column: 2 / 3;
+                font-size: 0.75rem;
+            }
+
+            .file-row > :nth-child(4) {
+                grid-column: 3 / 4;
+                grid-row: 1 / span 2;
+                align-self: center;
+            }
+
+            .file-row .file-name {
+                margin-left: 0;
+            }
+
+            .console-area {
+                min-height: 42vh !important;
+            }
+
+            .console-header {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 10px;
+            }
+
+            .log-entry {
+                flex-direction: column;
+                gap: 2px;
+            }
+
+            .log-time {
+                font-size: 0.72rem;
+            }
+
+            .modal {
+                width: calc(100% - 20px);
+                max-width: none;
+                max-height: 92vh;
+            }
+
+            textarea.editor {
+                height: 52vh;
+                font-size: 0.85rem;
+            }
+
+            .audio-player {
+                flex-wrap: wrap;
+                padding: 14px;
+            }
+
+            .progress-container {
+                order: 3;
+                width: 100%;
+            }
+
+            .time-display {
+                min-width: 0;
+            }
+
+            .toast-container {
+                left: 10px;
+                right: 10px;
+                bottom: 10px;
+            }
+
+            .toast {
+                min-width: 0;
+                width: 100%;
+            }
+        }
+
+        @media (max-width: 560px) {
+            .section-header {
+                font-size: 0.78rem;
+            }
+
+            .status-main {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+
+            .item-title {
+                font-size: 0.88rem;
+            }
+
+            .item-sub,
+            .file-meta,
+            .btn,
+            .toast-title {
+                font-size: 0.76rem;
+            }
+
+            .actions .btn,
+            .actions a.btn {
+                flex-basis: 100%;
+            }
+
+            .btn-icon {
+                padding: 6px;
+            }
+        }
    </style>
 </head>