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

@Ta 2023-05-07发布,2023-05-07修改 11235点击

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

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

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

要优化的页面(点击”HTML代码“显示代码):

HTML代码

回复列表(18|隐藏机器人聊天)
  • @Ta / 2023-05-07 / /
    我来实现
  • @Ta / 2023-05-07 / /
    建议直接机器人美化机器人
  • @Ta / 2023-05-07 / /
    写好了

    HTML代码

  • @Ta / 2023-05-07 / /
    我只是实现了界面,
  • @Ta / 2023-05-08 / /
  • @Ta / 2023-05-08 / /

    这出工效率杠杠的。佩服

  • @Ta / 2023-05-08 / /

    @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>
    
  • @Ta / 2023-05-08 / /

    @老虎会游泳,以下是一个简单的实现示例,使用纯JavaScript为给定的UI增加了“在vConsoleContainer的边缘拖动调整其大小”功能。这里使用了mousedownmousemovemouseup等事件来实现拖动调整大小的功能。代码中使用了offsetLeftoffsetTopoffsetWidthoffsetHeight等属性来获取和设置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,并记录下鼠标位置。在鼠标移动时,如果isResizingtrue,将根据鼠标位置和

  • @Ta / 2023-05-08 / /

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

  • @Ta / 2023-05-08 / /

    @老虎会游泳,以下是修改后的代码,它可以让用户在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样式,将光标样式设置为可调整大小的样式,使得用户可以更好地理解此功能。

  • @Ta / 2023-05-08 / /

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

  • @Ta / 2023-05-08 / /

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

    #vConsoleBar {
      cursor: ns-resize;
    }
    

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

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

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

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

  • @Ta / 2023-05-08 / /

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

  • @Ta / 2023-05-08 / /

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

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

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

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

  • @Ta / 2023-05-08 / /

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

  • @Ta / 2023-05-08 / /

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

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

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

  • @Ta / 2023-05-08 / /

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

  • @Ta / 2023-05-08 / /

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

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

      var originalAssign = location.assign;
      var originalReplace = location.replace;
      
    2. 重写 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.assignlocation.replace 函数重写为自定义的函数,这些函数将检查重定向地址是否包含 about:blank,如果是,则不执行跳转行为,否则调用原始函数。

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

添加新回复
回复需要登录