dsh-remote-panel 0.4.3 → 0.4.5

package/lib/client.js

@@ -1345,6 +1345,65 @@ window.__ModuleLoader__.load({
     .dsh-mobile-scrim, .dsh-mobile-offline { transition: none; animation: none; }
   }
 
+  /* 会话正文的横向留白：原生每侧 = clearance(16) + 16 = 32px，
+     390 的屏上等于两边各砍掉一行字；压到 16px，跟输入条卡片同一条基线 */
+  .EvIC1a_scroll {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+
+  /* 正文滚动区收口到输入条上沿：
+     原生把输入条做在滚动容器里（sticky 贴底、上沿渐隐到背景色），所以正文会一直滚到
+     输入条背后，滚轴也跟着画到屏幕最底。手机上更希望「正文止于输入条上沿」，
+     这里把输入条改成固定定位贴屏幕底、正文用 margin 让出它的高度，
+     滚动容器（连同滚轴）自然就停在输入条上方了。
+     用 fixed 而不是 absolute：切换「轨迹」页时滚动容器会因为 composer overlay 变成
+     position: relative，absolute 会被它缩小后的盒子接住，输入条就浮到屏幕中间。
+     高度用原生写在滚动容器上的 --dsh-composer-height（ResizeObserver 跟输入框同步）。 */
+  .wSkVaW_body[data-content-phase="active"] .wSkVaW_scrollBody {
+    margin-bottom: var(--dsh-composer-height, 152px) !important;
+  }
+  .wSkVaW_body[data-content-phase="active"] .wSkVaW_composerSeat {
+    position: fixed !important;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 7;
+    /* 正文已经不往输入条背后滚了，那条「渐隐到纯黑」的灰带也就不需要了 */
+    background: var(--dsw-alias-bg-base) !important;
+    background-image: none !important;
+  }
+  body[data-ds-dark-theme] .wSkVaW_body[data-content-phase="active"] .wSkVaW_composerSeat {
+    background: #000 !important;
+  }
+  /* 「回到底部」浮球原先按「输入条压在正文上」算偏移，正文让开后要贴回视口底 */
+  [data-conversation-scroll] .EvIC1a_toBottomSlot { bottom: 12px !important; }
+  /* 轨迹页也按「输入条浮在内容上」留了 composer + 16 的底部空白，收口后就成了死空白 */
+  .wSkVaW_body[data-content-phase="active"] [class*="_ledger"] {
+    --dsh-trajectory-bottom-clearance: 16px;
+  }
+
+  /* 滚轴细一点：原生 5px，390 屏上太抢眼。
+     主题把变量挂在 body 上（不是 :root），所以得盖在同一层 */
+  body { --dsh-scrollbar-width: 3px !important; }
+
+  /* 思考过程展开：原生给步骤组一个 max-height:400px 的内部滚动框，
+     展开后就是「页面一根滚轴 + 框里一根滚轴」，手指极易滚错。
+     手机上一律展开到底（只留页面一根滚轴），改用一条左侧竖线 + 轻微缩进，
+     表示「这一段是过程的旁注」；不再额外加内边距。 */
+  .O_Ebla_body {
+    max-height: none !important;
+    overflow: visible !important;
+    overscroll-behavior: none !important;
+    scrollbar-gutter: auto !important;
+    border-left: 2px solid var(--dsw-alias-border-l3);
+    padding-left: 10px;
+  }
+  .O_Ebla_fadeTop, .O_Ebla_fadeBottom {
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
+  }
+
   /* 会话内容：代码块 / 表格 / 图片 / 附件在手机上不撑破页面 */
   .md-code-block { max-width: 100%; }
   .md-code-block pre,
@@ -1470,48 +1529,52 @@ window.__ModuleLoader__.load({
   }
 
 
-  /* 设置弹窗：原生是「左导航 188 + 右内容」，到 390 内容列只剩 154。
-     这里把导航改成顶部一条可横滑的标签条，内容占满宽度；只匹配「有导航列的 dialog」。 */
-  [role="dialog"]:has(> [class*="_nav"]) {
-    flex-direction: column !important;
-    width: calc(100vw - 16px) !important;
-    max-width: none !important;
-    max-height: calc(100dvh - 24px);
-  }
-  [role="dialog"] > [class*="_nav"] {
-    flex: 0 0 auto !important;
-    width: 100% !important;
-    height: auto !important;
-    padding: 4px 8px 0 !important;
-    border-right: 0 !important;
-    border-bottom: 1px solid rgba(255, 255, 255, .08);
-  }
-  [role="dialog"] > [class*="_nav"] > [class*="_navTitle"] { display: none !important; }
-  [role="dialog"] > [class*="_nav"] [class*="_navList"] {
-    flex-direction: row !important;
-    height: auto !important;
-    overflow-x: auto;
-    overflow-y: hidden;
-    gap: 2px;
-    padding-bottom: 4px;
-    scrollbar-width: none;
-  }
-  [role="dialog"] > [class*="_nav"] [class*="_navList"]::-webkit-scrollbar { height: 0; }
-  [role="dialog"] > [class*="_nav"] [class*="_navCell"] {
-    flex: 0 0 auto !important;
-    width: auto !important;
-    height: 34px !important;
-    padding: 0 10px !important;
-    white-space: nowrap;
-  }
-  [role="dialog"] > [class*="_content"] {
-    flex: 1 1 auto !important;
-    width: 100% !important;
-    min-width: 0 !important;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior: contain;
-    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px)) !important;
+  /* 只对手机宽度生效：桌面端必须保持「左导航 188 + 右内容」。
+     之前这组规则写在了 @media 外面，桌面端打开设置也会被改成顶部标签条。 */
+  @media (max-width: 1023px) {
+    /* 设置弹窗：原生是「左导航 188 + 右内容」，到 390 内容列只剩 154。
+       这里把导航改成顶部一条可横滑的标签条，内容占满宽度；只匹配「有导航列的 dialog」。 */
+    [role="dialog"]:has(> [class*="_nav"]) {
+      flex-direction: column !important;
+      width: calc(100vw - 16px) !important;
+      max-width: none !important;
+      max-height: calc(100dvh - 24px);
+    }
+    [role="dialog"] > [class*="_nav"] {
+      flex: 0 0 auto !important;
+      width: 100% !important;
+      height: auto !important;
+      padding: 4px 8px 0 !important;
+      border-right: 0 !important;
+      border-bottom: 1px solid rgba(255, 255, 255, .08);
+    }
+    [role="dialog"] > [class*="_nav"] > [class*="_navTitle"] { display: none !important; }
+    [role="dialog"] > [class*="_nav"] [class*="_navList"] {
+      flex-direction: row !important;
+      height: auto !important;
+      overflow-x: auto;
+      overflow-y: hidden;
+      gap: 2px;
+      padding-bottom: 4px;
+      scrollbar-width: none;
+    }
+    [role="dialog"] > [class*="_nav"] [class*="_navList"]::-webkit-scrollbar { height: 0; }
+    [role="dialog"] > [class*="_nav"] [class*="_navCell"] {
+      flex: 0 0 auto !important;
+      width: auto !important;
+      height: 34px !important;
+      padding: 0 10px !important;
+      white-space: nowrap;
+    }
+    [role="dialog"] > [class*="_content"] {
+      flex: 1 1 auto !important;
+      width: 100% !important;
+      min-width: 0 !important;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--dsh-safe-bottom, 0px)) !important;
+    }
   }
 
   /* 长会话滚动：只在窄屏做滚动容器层面的优化，桌面保持原样 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-panel",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "DSH 远程访问控制面：部署向导、状态面板与一键配对（EasyTier + Caddy），数据面保持进程外。",
   "type": "module",
   "main": "./lib/index.js",