从零实现一套低代码（保姆级教程）【运行时】 --- 【29】实现设计态的预览按钮和全屏展示

摘要

目前这个低代码平台的整体，我们已经搭建好了。后续可能就是一些额外功能的补充。现在我们看这个平台会发现一个比较明显的问题：

就是在运行时，能展示组件的地方只有中间的画布区。因为在设计态的时候，我们就已经缩小了放置组件的范围，有三个地方我们是不能拖拽组件的。顶部栏，左侧组件区域，右侧面板区域。

为了能够让这三个区域放置组件，我们希望能够将其隐藏，并且通过某种方式再让它显示出来。当然这里博主只是提供了一个产品思路，如果读者有其他的实现方式，可以自行尝试，这里没有什么必须要以什么方式去实现。

1.实现预览按钮

在设计态，我们设计好页面后，总是需要保存后，到主页面里进行预览。所以我们在设计态也做一个预览按钮，方便我们去操作。

OK，来到designTop组件，我们在保存按钮的旁边添加一个预览按钮。

      <Button onClick={reviewPage} type='primary' ghost>预览</Button>

预览的事件，就是到render的路由下展示即可。

  const reviewPage = () => {
    const search = window.location.search || '';
    const pageId = search.replace('?pageId=', '');
    window.open(`http://localhost:3000/render?pageId=${pageId}`)
  }

但是这样做完你会发现一个问题，就是当你在设计态做了一些操作之后，点击预览按钮，是没有效果的。页面还是长之前的样子。

这是因为，在预览的页面里也是通过请求接口获取pageJson来进行页面展示的，所以在预览之前应该要先进行保存。

所以预览的事件里，我们先进行保存逻辑的处理，同时我们修改一下预览这个词，变成保存并预览。

  const reviewPage = () => {
    const search = window.location.search || '';
    const pageId = search.replace('?pageId=', '');
    const comList = Store.getState().comList;
    axios.post('http://localhost:4000/page-json/updatePage', {
      pageId,
      pageJson: comList
    })
    .then(res => {
      if(res.data.code == 200) {
        window.open(`http://localhost:3000/render?pageId=${pageId}`)
      }
    })
  }

  <Button onClick={reviewPage} type='primary' ghost>保存并预览</Button>

2.控制顶部栏的显示和隐藏

现在，我们需要一个按钮来控制顶部栏的隐藏，这里我们也在顶部栏的下方添加一个按钮。

      <div onClick={hideDesignTop} className='icon'>
        <ArrowUpOutlined/>
      </div>

  .icon {
    font-size: 20px;
    float: right;
    color: rgb(0, 26, 255);
    margin-top: 50px;
    margin-right: 60px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 10px 0px rgb(213, 213, 223);
  }

这个按钮的点击事件，就是将顶部栏进行隐藏，所以我们需要一个变量去控制顶部栏的显示状态。

  const [visible, setVisible] = useState(true)
  
  const hideDesignTop = () => {
    setVisible(false);
  }

这样当我们点击这个按钮之后，顶部栏就会消失了。

那有一个问题，消失了之后我怎么让它变回来呢？我还需要保存的功能啊，这里我们监听键盘的keydown事件，并且给一个提示。当我按下w键时，将顶部栏恢复。

  useEffect(() => {
    const keydownFun = (e) => {
      if(e.key === 'w') {
        setVisible(true)
      }
    }
    document.addEventListener('keydown', keydownFun);

    return () => {
      document.removeEventListener('keydown', keydownFun)
    }
  }, [])
  
  const hideDesignTop = () => {
    setVisible(false);
    message.info('键盘W按钮按下，恢复顶部栏')
  }

Ok，这样我们就可以控制顶部栏的显示和隐藏了，隐藏之后我们可以在空出的位置进行拖拽组件。

之后，以同样的方式去控制左侧组件和右侧面板的显示和隐藏，这里就不再粘贴代码了。

这部分代码提交在github上
https://github.com/TeacherXin/XinBuilder
commit: fix: 第二十四节：实现设计态的预览按钮和全屏展示