dsh-codinput 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codinput",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "DSH WebUI 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar）。",
   "license": "MIT",
   "author": "Witherwithwinter",

package/src/client/components/CodinputSurface.tsx

@@ -73,6 +73,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const cardRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
   const caretRef = useRef<number | null>(null);
+  const previewRef = useRef<HTMLDivElement | null>(null);
 
   // 高度调节：仅顶边把手，1:1 跟手（顶边上移多少、编辑区就高多少），松手持久化。
   // 宽度不做自有调节——沿用官方聊天宽度调节器（wSkVaW_widthHandle）：
@@ -245,6 +246,34 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     [state?.draft, previewOn],
   );
 
+  // ---- 分屏同步滚动：两侧按滚动比例互随（内容高度不同，比例映射） ----
+  // scroll 不冒泡但走捕获相位，挂在 body 上的 onScrollCapture 能收到两栏的
+  // 滚动，且 CM 视图随会话重建（scrollDOM 换新）也无需重挂监听；epsilon 防
+  // 两侧事件互馈成回环。预览栏不显示滚动条（编辑栏为主），滚轮仍可反向带动。
+  const syncSplitScroll = (event: React.SyntheticEvent<HTMLDivElement>): void => {
+    if (!editOn || !previewOn) return;
+    const src = event.target as HTMLElement;
+    const editorScroll = viewRef.current?.scrollDOM;
+    const previewScroll = previewRef.current;
+    if (!editorScroll || !previewScroll) return;
+    const dst = src === editorScroll ? previewScroll : src === previewScroll ? editorScroll : null;
+    if (!dst) return;
+    const srcMax = src.scrollHeight - src.clientHeight;
+    if (srcMax <= 0) return;
+    const top = (src.scrollTop / srcMax) * (dst.scrollHeight - dst.clientHeight);
+    if (Math.abs(dst.scrollTop - top) > 1) dst.scrollTop = top;
+  };
+  // 进入分屏 / 草稿更新 / 切会话后，预览按编辑器当前比例对齐。
+  useEffect(() => {
+    if (!editOn || !previewOn) return;
+    const editorScroll = viewRef.current?.scrollDOM;
+    const previewScroll = previewRef.current;
+    if (!editorScroll || !previewScroll) return;
+    const editorMax = editorScroll.scrollHeight - editorScroll.clientHeight;
+    if (editorMax <= 0) return;
+    previewScroll.scrollTop = (editorScroll.scrollTop / editorMax) * (previewScroll.scrollHeight - previewScroll.clientHeight);
+  }, [editOn, previewOn, html, sessionId]);
+
   const toggleEdit = (): void => {
     if (!editOn && previewOn) setEditOn(true);
     else if (editOn && previewOn) setEditOn(false);
@@ -329,6 +358,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
         <div
           className="dci-body"
           data-split={editOn && previewOn}
+          onScrollCapture={syncSplitScroll}
           style={
             !side && !float && bodyHeight !== null
               ? ({ '--dci-body-h': `${bodyHeight}px`, '--dci-body-max': `${bodyHeight}px` } as React.CSSProperties)
@@ -352,7 +382,7 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
             />
           ) : null}
           {previewOn ? (
-            <div className="dci-preview" data-solo={!editOn}>
+            <div className="dci-preview" data-solo={!editOn} ref={previewRef}>
               {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>}
             </div>
           ) : null}

package/src/client/styles.ts

@@ -50,8 +50,14 @@ const CSS = `
 .dci-body { position: relative; display: flex; gap: 0; min-height: 60px; max-height: var(--dci-body-max, 46vh); overflow: hidden; }
 .dci-body[style*="--dci-body-h"] { height: var(--dci-body-h); }
 /* 分屏：grid 等宽两栏（fr 计入 padding/border，两栏边界严格居中；flex
- * 会把预览栏的横向 padding 泄漏进空间分配，做不到对半）。 */
-.dci-body[data-split="true"] { display: grid; grid-template-columns: 1fr 1fr; }
+ * 会把预览栏的横向 padding 泄漏进空间分配，做不到对半）。行高必须
+ * minmax(0,1fr)+两栏 min-height:0：隐式 auto 行随内容撑高、不受 max-height
+ * 钳制，内容一高整行溢出被 overflow:hidden 裁掉，两栏都出不了滚动条。 */
+.dci-body[data-split="true"] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
+.dci-body[data-split="true"] > * { min-height: 0; }
+/* 分屏同步滚动：只留编辑栏一个滚动条，预览栏藏起但滚轮仍可反向带动编辑器。 */
+.dci-body[data-split="true"] .dci-preview { scrollbar-width: none; }
+.dci-body[data-split="true"] .dci-preview::-webkit-scrollbar { display: none; }
 .dci-body[data-split="true"] .dci-editor-wrap { border-right: 1px solid var(--dsw-alias-border-l2, color-mix(in srgb, currentColor 12%, transparent)); }
 .dci-editor-wrap { position: relative; flex: 1 1 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; }
 .dci-editor-wrap[data-solo="true"] { flex-basis: 100%; }