制作一个像 VS Code 一样的水平控制台 window

Question

我想在 VS Code 中实现一个类似控制台 window 的控制台 window。

在VS Code中，当我们点击Shift+Command+Y，一个控制台window在代码window下方打开。有几个特点：

整个window分为2个部分。代码 window 和控制台 window 都可以在右侧显示滚动条。
控制台的出现window调整代码大小window。
有一个可以调整控制台大小的水平拆分器 window（和代码 window）。

我试图创建一个 codesandbox。但是它没有功能2和功能3。

有人能帮忙吗？

import { useState } from "react";
import { Button } from "@material-ui/core";

import "./styles.css";

export default function App() {
  const [textState, setTextState] = useState("off");

  const toggleText = () => {
    setTextState((state) => (state === "On" ? "Off" : "On"));
  };

  return (
    <>
      <Button variant="contained" color="primary" onClick={toggleText}>
        Toggle
      </Button>
      <div style={{ overflowY: "scroll", height: "300px", fontSize: "30px" }}>
        <h1>code 1</h1>
        <h1>code 2</h1>
        <h1>code 3</h1>
      </div>
      <div>
        {textState === "On" && (
          <div
            style={{ overflowY: "scroll", height: "200px", fontSize: "30px" }}
          >
            <h1>console 1</h1>
            <h1>console 2</h1>
            <h1>console 3</h1>
          </div>
        )}
      </div>
    </>
  );
}

Answer 1

对于第二个问题，当console视图隐藏时，您可以将code区域高度设置为全高。

height: `${textState === "On" ? 500 - consoleAreaHeight : 500}px`

对于第 3 个问题，可以使用 ref 和鼠标移动处理程序来实现。

const consoleRef = useRef(null);

  const mouseMoveHandler = (e) => {
    e.preventDefault();
    if (resizing) {
      const delta = consoleRef.current.getBoundingClientRect().top - e.clientY;
      setConsoleAreaHeight(
        (prevConsoleAreaHeight) => prevConsoleAreaHeight + delta
      );
    }
  };

代码沙箱 => https://codesandbox.io/s/react-material-togglebuttonexample-forked-dk7lu?file=/src/App.jsx

制作一个像 VS Code 一样的水平控制台 window

Make a horizontal console window like VS Code

javascript

css

reactjs

splitter