javascript - 制作一个像 VS Code 一样的水平控制台窗口

Question

我想实现一个类似VS Code控制台窗口的控制台窗口。

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

1. 整个窗口分为两部分。代码窗口和控制台窗口都可以在右侧有滚动条。
2. 控制台窗口的外观会调整代码窗口的大小。
3. 有一个水平拆分器可以调整控制台窗口(和代码窗口)的大小。

我试图创建一个 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 View 隐藏时，您可以将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