求前端大神帮我美化一下 @讯飞星火机器人的调试控制台 - 讨论/求助

https://xinghuo.xfyun.cn/desk 页面不能打开F12控制台否则会跳转到空白页，所以我做了个自己的控制台，可以用但太丑了，求前端大神美化。

希望做成腾讯vConsole那样的，右下角有个浮动按钮，点击后弹出控制台。

为什么不直接用vConsole？因为vConsole和真正的控制台一样都会跳转到空白页，不清楚讯飞是用什么方法检测的。我自己写的简易调试控制台就不会导致跳转。

要优化的页面（点击”HTML代码“显示代码）：

这出工效率杠杠的。佩服

@ChatGPT，写一段js，为以下UI增加“在vConsoleContainer的边缘拖动调整其大小”功能

<div id="vConsoleButton" onclick="openVConsole()">
    <svg style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2695">
    </svg>
    <span> 打开控制台</span>
</div>
<div id="vConsole" class="vConsoleHidden">
    <div class="vConsoleContainer">
        <div id="vConsoleBar">
            <label>调试控制台</label>
            <div class="vConsoleClean" onclick="clearVConsole()">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                </svg>
            </div>
            <div class="vConsoleCloseBtn" onclick="closeVConsole()">
                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3554">
                </svg>
            </div>
        </div>
        <textarea id="vConsoleOutput" readonly></textarea>
        <div class="vConsoleCommand">
            <textarea type="text" id="vConsoleInput" placeholder="请键入命令..."></textarea>
        </div>
    </div>
</div>

@老虎会游泳，以下是一个简单的实现示例，使用纯JavaScript为给定的UI增加了“在vConsoleContainer的边缘拖动调整其大小”功能。这里使用了mousedown、mousemove和mouseup等事件来实现拖动调整大小的功能。代码中使用了offsetLeft、offsetTop、offsetWidth和offsetHeight等属性来获取和设置UI元素的位置和尺寸。

<div id="vConsoleButton" onclick="openVConsole()">
    <svg style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2695">
    </svg>
    <span> 打开控制台</span>
</div>
<div id="vConsole" class="vConsoleHidden">
    <div class="vConsoleContainer" id="vConsoleContainer">
        <div id="vConsoleBar">
            <label>调试控制台</label>
            <div class="vConsoleClean" onclick="clearVConsole()">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                </svg>
            </div>
            <div class="vConsoleCloseBtn" onclick="closeVConsole()">
                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3554">
                </svg>
            </div>
        </div>
        <textarea id="vConsoleOutput" readonly></textarea>
        <div class="vConsoleCommand">
            <textarea type="text" id="vConsoleInput" placeholder="请键入命令..."></textarea>
        </div>
    </div>
</div>

<script>
    var vConsoleContainer = document.getElementById("vConsoleContainer");
    var isResizing = false;
    var lastX, lastY;

    document.addEventListener("mousedown", function(e) {
        if (e.target.id == "vConsoleBar") {
            isResizing = true;
            lastX = e.clientX;
            lastY = e.clientY;
        }
    });

    document.addEventListener("mousemove", function(e) {
        if (isResizing) {
            var deltaX = e.clientX - lastX;
            var deltaY = e.clientY - lastY;
            var containerWidth = vConsoleContainer.offsetWidth;
            var containerHeight = vConsoleContainer.offsetHeight;

            vConsoleContainer.style.width = containerWidth + deltaX + "px";
            vConsoleContainer.style.height = containerHeight + deltaY + "px";

            lastX = e.clientX;
            lastY = e.clientY;
        }
    });

    document.addEventListener("mouseup", function(e) {
        if (isResizing) {
            isResizing = false;
        }
    });
</script>

上述代码使用事件监听器来实现拖动调整大小的功能，当鼠标按下时，如果点击的是vConsoleBar元素，将设置isResizing变量为true，并记录下鼠标位置。在鼠标移动时，如果isResizing为true，将根据鼠标位置和

@ChatGPT，改为在 vConsoleBar 上拖动可调整 vConsoleContainer 的高度

@老虎会游泳，以下是修改后的代码，它可以让用户在vConsoleBar元素上拖动调整vConsoleContainer的高度。

<div id="vConsoleButton" onclick="openVConsole()">
    <svg style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2695">
    </svg>
    <span> 打开控制台</span>
</div>
<div id="vConsole" class="vConsoleHidden">
    <div class="vConsoleContainer" id="vConsoleContainer">
        <div id="vConsoleBar">
            <label>调试控制台</label>
            <div class="vConsoleClean" onclick="clearVConsole()">
                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                </svg>
            </div>
            <div class="vConsoleCloseBtn" onclick="closeVConsole()">
                <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3554">
                </svg>
            </div>
        </div>
        <textarea id="vConsoleOutput" readonly></textarea>
        <div class="vConsoleCommand">
            <textarea type="text" id="vConsoleInput" placeholder="请键入命令..."></textarea>
        </div>
    </div>
</div>

<style>
    #vConsoleBar {
        cursor: ns-resize;
    }
</style>

<script>
    var vConsoleContainer = document.getElementById("vConsoleContainer");
    var vConsoleBar = document.getElementById("vConsoleBar");
    var isResizing = false;
    var lastY;

    vConsoleBar.addEventListener("mousedown", function(e) {
        isResizing = true;
        lastY = e.clientY;
    });

    document.addEventListener("mousemove", function(e) {
        if (isResizing) {
            var deltaY = e.clientY - lastY;
            var containerHeight = vConsoleContainer.offsetHeight;

            vConsoleContainer.style.height = containerHeight + deltaY + "px";

            lastY = e.clientY;
        }
    });

    document.addEventListener("mouseup", function(e) {
        if (isResizing) {
            isResizing = false;
        }
    });
</script>

在这个版本的代码中，我们将鼠标按下事件的监听器绑定到了vConsoleBar元素上，因此只有当鼠标按下时同时在vConsoleBar元素上时，才会触发拖动调整高度的操作。在鼠标移动事件中，我们只需要记录下当前的鼠标位置，计算出移动的距离，并将其加到vConsoleContainer元素的高度上。最后，在鼠标释放时，将isResizing变量设置为false，以结束拖动操作。注意，我们还添加了一些CSS样式，将光标样式设置为可调整大小的样式，使得用户可以更好地理解此功能。

@ChatGPT，鼠标放在vConsoleBar上时变为调整大小的光标

@老虎会游泳，您可以使用 CSS cursor 属性将光标样式设置为可调整大小的样式。以下是将光标样式设置为调整大小的样式的 CSS 样式表：

#vConsoleBar {
  cursor: ns-resize;
}

将上述 CSS 样式表添加到页面的 <style> 元素或外部样式表中，或者将其添加到 vConsoleBar 元素的 style 属性中即可。

如果您希望鼠标放在 vConsoleBar 元素上时自动变为调整大小的光标，可以将光标样式设置为 hover 状态下的样式：

#vConsoleBar:hover {
  cursor: ns-resize;
}

这样，只要鼠标放在 vConsoleBar 元素上，就会自动变为调整大小的光标。

@ChatGPT，鼠标放在 vConsoleBar 元素上时禁止选中内容

@老虎会游泳，您可以使用 CSS user-select 属性来禁止在 vConsoleBar 元素上选中内容。以下是将 user-select 设置为 none 的 CSS 样式表：

#vConsoleBar {
  cursor: ns-resize;
  user-select: none;
}

将上述 CSS 样式表添加到页面的 <style> 元素或外部样式表中，或者将其添加到 vConsoleBar 元素的 style 属性中即可。

这样，当鼠标放在 vConsoleBar 元素上时，用户将无法选择 vConsoleBar 元素内的文本。

@ChatGPT，写一段js代码，对重定向地址进行过滤，忽略跳转到about:blank的尝试

@老虎会游泳，以下是一个简单的示例代码，它使用了 JavaScript 正则表达式来检查重定向地址是否包含 about:blank，如果是，则忽略该重定向。

function filterRedirectUrl(url) {
  // 如果重定向地址包含 about:blank，则返回空字符串
  if (/about:blank/.test(url)) {
    return '';
  }

  // 如果重定向地址不包含 about:blank，则返回原始地址
  return url;
}

这个函数接受一个字符串参数 url，表示要检查的重定向地址。如果重定向地址包含 about:blank，则函数将返回空字符串 ''，否则将返回原始地址。您可以在重定向前调用这个函数，以确保不会跳转到 about:blank。

@ChatGPT，直接注入到location对象中，覆盖原始的跳转行为

@老虎会游泳，虽然覆盖原始的跳转行为可能会带来一些意想不到的问题，但如果您希望直接注入到 location 对象中来覆盖原始的跳转行为，可以按照以下步骤操作：

保存原始的 location.assign 函数和 location.replace 函数。

var originalAssign = location.assign;
var originalReplace = location.replace;

重写 location.assign 函数和 location.replace 函数，以检查重定向地址是否包含 about:blank，如果是，则不执行跳转行为。
```
location.assign = function(url) {
  if (/about:blank/.test(url)) {
    return;
  }
  originalAssign.call(this, url);
};

location.replace = function(url) {
  if (/about:blank/.test(url)) {
    return;
  }
  originalReplace.call(this, url);
};
```
这些代码会将 location.assign 和 location.replace 函数重写为自定义的函数，这些函数将检查重定向地址是否包含 about:blank，如果是，则不执行跳转行为，否则调用原始函数。

注意，覆盖 location 对象的原始行为可能会导致意想不到的问题。如果您不确定是否应该这样做，请谨慎使用。