@jacksontian/mwt 1.0.0 → 1.2.0

package/public/css/style.css

@@ -21,9 +21,10 @@
   --accent: #6c8cff;
   --accent-hover: #8aa4ff;
   --text-primary: #d4d8e8;
-  --text-secondary: #8890a8;
-  --text-dim: #555b72;
+  --text-secondary: #9aa3bc;
+  --text-dim: #6f788f;
   --border: #252a3d;
+  --pane-border-idle: #1e2333;
   --danger: #e05560;
   --danger-hover: #ff6b76;
   --terminal-bg: #0a0c12;
@@ -43,6 +44,7 @@
   --text-secondary: #5a6178;
   --text-dim: #9098b0;
   --border: #d0d5e0;
+  --pane-border-idle: #c5cad6;
   --danger: #d43d4e;
   --danger-hover: #c02838;
   --terminal-bg: #ffffff;
@@ -83,16 +85,14 @@ body {
   -webkit-app-region: no-drag;
 }
 
+.toolbar-left, .toolbar-right {
+  flex: 1;
+}
+
 .toolbar-right {
-  min-width: 100px;
   justify-content: flex-end;
 }
 
-#terminal-count {
-  color: var(--text-dim);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
 
 #btn-new-terminal {
   display: flex;
@@ -132,8 +132,10 @@ body {
 .layout-btn {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 5px;
-  padding: 5px 12px;
+  width: 80px;
+  padding: 5px 0;
   background: transparent;
   color: var(--text-secondary);
   border: none;
@@ -291,12 +293,30 @@ body {
 .terminal-pane {
   display: flex;
   flex-direction: column;
+  position: relative;
   background: var(--terminal-bg);
-  border: 1px solid var(--border);
+  border: 1px solid var(--pane-border-idle);
   border-radius: var(--radius-sm);
   overflow: hidden;
   min-width: 0;
   min-height: 0;
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.terminal-pane.pane-focused {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
+  z-index: 1;
+}
+
+.terminal-pane.pane-focused .pane-header {
+  background: color-mix(in srgb, var(--accent) 12%, var(--pane-header));
+  border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+
+.terminal-pane.pane-focused .pane-title {
+  color: var(--text-primary);
+  font-weight: 500;
 }
 
 .pane-header {
@@ -309,11 +329,13 @@ body {
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
   user-select: none;
+  transition: background var(--transition), border-color var(--transition);
 }
 
 .pane-title {
   font-size: 11px;
   color: var(--text-secondary);
+  transition: color var(--transition), font-weight var(--transition);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -387,6 +409,8 @@ body {
   flex: 1 !important;
   min-width: 0 !important;
   min-height: 0 !important;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
 }
 
 .terminal-body {
@@ -402,27 +426,43 @@ body {
 
 .terminal-body .xterm-viewport {
   overflow-y: auto !important;
+  /* 与 theme 背景一致，避免 vendor 默认 #000 与画布色差导致边缘发闷 */
+  background-color: var(--terminal-bg) !important;
 }
 
-/* ========== Layout: Side by Side ========== */
-.layout-side-by-side {
+/* ========== Layout: Columns ========== */
+.layout-columns {
   display: flex;
   flex-direction: row;
   gap: 2px;
   padding: 2px;
 }
 
-.layout-side-by-side .terminal-pane {
+.layout-columns .terminal-pane {
   flex: 1;
   min-width: 200px;
 }
 
+/* ========== Layout: Rows ========== */
+.layout-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+}
+
+.layout-rows .terminal-pane {
+  flex: 1;
+  min-height: 100px;
+}
+
 /* ========== Layout: Grid ========== */
 .layout-grid {
   display: grid;
   gap: 2px;
   padding: 2px;
   grid-template-columns: 1fr;
+  grid-auto-rows: 1fr;
 }
 
 .layout-grid .terminal-pane {
@@ -441,6 +481,11 @@ body {
   inset: 0;
   border-radius: 0;
   border: none;
+  box-shadow: none;
+}
+
+.layout-tabs .terminal-pane.pane-focused.active {
+  box-shadow: inset 0 0 0 1px var(--accent);
 }
 
 .layout-tabs .terminal-pane.active {
@@ -533,6 +578,96 @@ body {
   display: block;
 }
 
+/* ========== Language Dropdown ========== */
+#lang-dropdown {
+  position: relative;
+  margin-right: 4px;
+}
+
+#btn-lang {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  gap: 4px;
+}
+
+#btn-lang:hover, #lang-dropdown.open #btn-lang {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+#btn-lang .lang-chevron {
+  width: 8px;
+  height: 8px;
+  transition: transform var(--transition);
+}
+
+#lang-dropdown.open .lang-chevron {
+  transform: rotate(180deg);
+}
+
+#lang-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 110px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+#lang-dropdown.open #lang-menu {
+  display: block;
+}
+
+.lang-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 7px 12px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  text-align: left;
+  transition: background var(--transition), color var(--transition);
+}
+
+.lang-option:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.lang-option.active {
+  color: var(--accent);
+}
+
+.lang-option .lang-check {
+  opacity: 0;
+  color: var(--accent);
+}
+
+.lang-option.active .lang-check {
+  opacity: 1;
+}
+
 /* ========== Theme Toggle ========== */
 #btn-theme-toggle {
   display: flex;
@@ -568,6 +703,236 @@ body {
   display: block;
 }
 
+/* ========== Drag to swap ========== */
+.pane-header.dragging-source {
+  opacity: 0.5;
+}
+
+.terminal-pane.drag-over {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.pane-header[draggable="true"] {
+  cursor: grab;
+}
+
+.pane-header[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.tab[draggable="true"] {
+  cursor: grab;
+}
+
+.tab[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.tab.drag-over {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+}
+
+/* ========== Shortcuts Button ========== */
+#btn-shortcuts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+  margin-right: 4px;
+}
+
+#btn-shortcuts:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ========== Shortcuts Modal ========== */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-overlay.hidden {
+  display: none;
+}
+
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 400px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  transition: all var(--transition);
+}
+
+.modal-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 12px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.shortcut-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.shortcut-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 2px;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.shortcut-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.shortcut-key {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 2px 7px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ========== Settings Modal ========== */
+#btn-settings {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+  margin-right: 4px;
+}
+
+#btn-settings:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.settings-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin-bottom: 2px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.settings-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  min-width: 70px;
+}
+
+input[type="range"]#input-font-size {
+  flex: 1;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.settings-text-input {
+  flex: 1;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 4px 8px;
+  outline: none;
+  transition: border-color var(--transition);
+}
+
+.settings-text-input:focus {
+  border-color: var(--accent);
+}
+
 /* ========== Keyboard shortcut hint ========== */
 @media (max-width: 600px) {
   .layout-btn span {

package/public/index.html

@@ -11,43 +11,108 @@
 <body>
   <div id="toolbar">
     <div class="toolbar-left">
-      <button id="btn-new-terminal" title="New Terminal (Ctrl+Shift+T)">
-        <span class="btn-icon">+</span> New Terminal
+      <button id="btn-new-terminal" data-i18n-title="newTerminalTooltip">
+        <span class="btn-icon">+</span> <span data-i18n="newTerminal">New Terminal</span>
       </button>
     </div>
     <div class="toolbar-center">
       <div class="layout-switcher">
-        <button class="layout-btn active" data-layout="side-by-side" title="Side by Side">
+        <button class="layout-btn active" data-layout="columns" data-i18n-title="columns">
           <svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="2" width="6" height="12" rx="1" fill="currentColor" opacity="0.8"/><rect x="9" y="2" width="6" height="12" rx="1" fill="currentColor" opacity="0.5"/></svg>
-          <span>Side by Side</span>
+          <span data-i18n="columns">Columns</span>
         </button>
-        <button class="layout-btn" data-layout="grid" title="Grid">
+        <button class="layout-btn" data-layout="rows" data-i18n-title="rows">
+          <svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="2" width="14" height="5" rx="1" fill="currentColor" opacity="0.8"/><rect x="1" y="9" width="14" height="5" rx="1" fill="currentColor" opacity="0.5"/></svg>
+          <span data-i18n="rows">Rows</span>
+        </button>
+        <button class="layout-btn" data-layout="grid" data-i18n-title="grid">
           <svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.8"/><rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.5"/><rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" opacity="0.3"/></svg>
-          <span>Grid</span>
+          <span data-i18n="grid">Grid</span>
         </button>
-        <button class="layout-btn" data-layout="tabs" title="Tabs">
+        <button class="layout-btn" data-layout="tabs" data-i18n-title="tabs">
           <svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="4" width="14" height="11" rx="1" fill="currentColor" opacity="0.3"/><rect x="1" y="2" width="6" height="4" rx="1" fill="currentColor" opacity="0.8"/><rect x="8" y="2" width="4" height="4" rx="1" fill="currentColor" opacity="0.4"/></svg>
-          <span>Tabs</span>
+          <span data-i18n="tabs">Tabs</span>
         </button>
       </div>
     </div>
     <div class="toolbar-right">
-      <button id="btn-fullscreen" title="Toggle fullscreen (F11)">
+      <div id="lang-dropdown">
+        <button id="btn-lang" title="Language">
+          <span id="btn-lang-label"></span>
+          <svg class="lang-chevron" viewBox="0 0 8 8" fill="none"><path d="M1 2.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </button>
+        <div id="lang-menu"></div>
+      </div>
+      <button id="btn-shortcuts" data-i18n-title="shortcutsTooltip">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M4 7h1M7 7h1M10 7h1M4 9.5h8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
+      </button>
+      <button id="btn-fullscreen" data-i18n-title="fullscreenTooltip">
         <svg class="icon-enter-fs" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <svg class="icon-exit-fs" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 2v4H2M10 6h4V2M10 14v-4h4M6 10H2v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
-      <button id="btn-theme-toggle" title="Toggle theme">
+      <button id="btn-theme-toggle" data-i18n-title="toggleTheme">
         <svg class="icon-sun" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.17 3.17l1.06 1.06M11.77 11.77l1.06 1.06M3.17 12.83l1.06-1.06M11.77 4.23l1.06-1.06" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
         <svg class="icon-moon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.36 10.06A5.5 5.5 0 015.94 2.64a6 6 0 107.42 7.42z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
       </button>
-      <span id="terminal-count">0 terminals</span>
+      <button id="btn-settings" data-i18n-title="settings">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><line x1="1" y1="4" x2="15" y2="4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><line x1="1" y1="8" x2="15" y2="8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><line x1="1" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="5" cy="4" r="1.8" fill="currentColor" stroke="none"/><circle cx="10" cy="8" r="1.8" fill="currentColor" stroke="none"/><circle cx="6" cy="12" r="1.8" fill="currentColor" stroke="none"/></svg>
+      </button>
     </div>
   </div>
 
   <div id="tab-bar" class="hidden"></div>
 
   <div id="main-content">
-    <div id="terminal-container" class="layout-side-by-side"></div>
+    <div id="terminal-container" class="layout-columns"></div>
+  </div>
+
+  <div id="settings-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <span class="modal-title" data-i18n="settingsTitle">Settings</span>
+        <button id="btn-settings-close" class="modal-close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="settings-group">
+          <div class="settings-group-title" data-i18n="settingsFont">Font</div>
+          <div class="settings-row">
+            <label class="settings-label" for="input-font-size"><span data-i18n="settingsFontSize">Size</span> <span id="font-size-value"></span></label>
+            <input type="range" id="input-font-size" min="8" max="32" step="1">
+          </div>
+          <div class="settings-row">
+            <label class="settings-label" for="input-font-family" data-i18n="settingsFontFamily">Family</label>
+            <input type="text" id="input-font-family" class="settings-text-input" data-i18n-placeholder="settingsFontFamilyPlaceholder" placeholder="e.g. Menlo, monospace">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="shortcuts-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <span class="modal-title" data-i18n="shortcutsTitle">Keyboard Shortcuts</span>
+        <button id="btn-shortcuts-close" class="modal-close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="shortcut-group">
+          <div class="shortcut-group-title" data-i18n="shortcutsGroupTerminals">Terminals</div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsNewTerminal">New Terminal</span><kbd class="shortcut-key" data-shortcut="ctrl+alt+N"></kbd></div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsCloseTerminal">Close Terminal</span><kbd class="shortcut-key" data-shortcut="ctrl+alt+W"></kbd></div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsMaximizeTerminal">Maximize / Restore Terminal</span><kbd class="shortcut-key" data-shortcut="ctrl+alt+M"></kbd></div>
+        </div>
+        <div class="shortcut-group">
+          <div class="shortcut-group-title" data-i18n="shortcutsGroupNavigation">Navigation</div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsNextTerminal">Next Terminal</span><kbd class="shortcut-key" data-shortcut="ctrl+alt+→"></kbd></div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsPrevTerminal">Previous Terminal</span><kbd class="shortcut-key" data-shortcut="ctrl+alt+←"></kbd></div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsSwitchTerminal">Switch to Terminal 1–9</span><kbd class="shortcut-key" data-shortcut="alt+1~9"></kbd></div>
+        </div>
+        <div class="shortcut-group">
+          <div class="shortcut-group-title" data-i18n="shortcutsGroupWindow">Window</div>
+          <div class="shortcut-row"><span class="shortcut-desc" data-i18n="shortcutsToggleFullscreen">Toggle Fullscreen</span><kbd class="shortcut-key" data-shortcut="F11"></kbd></div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script src="/vendor/xterm/xterm.js"></script>