• 讲讲项目里的仪表盘编辑器（一）

    需求

            要做一个仪表盘系统，要求有：

            ① 设计功能（包括布局、大小、排列）
            ② 预览功能
            ③ 运行功能

     布局选择

            做编辑器，肯定要先选择布局。

            前端有几种常用布局。

           静态布局

            也叫文档布局。默认的网页形式是文档流的形式，一个网页就像是一条条从左流向右的河流。在文档中有两种元素，内联元素（display:inline）和块级元素（display:block）。内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。而块级元素则会独占一行，按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。

            这肯定不适合用来做编辑器。

            浮动布局

            浮动元素会脱离文档流并浮动到左侧或右侧。这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。

                   这种肯定也不行。因为元素只能向左向右浮动。并且周围元素会围绕浮动元素旋转，并不会脱离文档流，也就是无法自定义其位置。

            定位布局

            通过调整position这个CSS属性的值来实现（absolute/relative/fixed/static(绝对/相对/固定/静态(默认))四个值）。

            static为静态布局，遵循默认文档流。这没什么好说的。

            absolute绝对定位：元素会脱离文档流，通过TBLR（ top,bottom,left,right） 定位，会选取最近的一个有定位设置的父级对象（非static）进行绝对定位，如果没有设置定位属性的父级对象，则将以body坐标原点进行定位。绝对定位的元素不会占有空间，也不会影响别的元素。

            relative相对定位：对象不可层叠、不脱离文档流，参考自身静态位置通过 TBLR定位。设置了TBLR之后，元素位置会发生偏移，但仍然占有原来的位置，且不会影响别的元素，而是覆盖在上方。相对定位与绝对定位的区别就是相对定位是只占有原来的空间，而绝对定位不占有空间。

            fixed固定定位：顾名思义，固定定位就是固定在一个位置，不会随着页面滚动而改变位置的定位方式，像常见的页面上的小广告，或者右下角的返回页面顶部等等。

            如果要做编辑器，fixed（只有单页了）和static肯定不行。relative不脱离文档流，也不行。那么只能以页面为定位的absolute绝对定位了。这么做有几个缺点：

            第一，每个元素都需要精准的TBLR值。这是很麻烦的。甚至需要去计算。

            第二：拖拽放大缩小元素的时候，会改变其自身的TBLR值。并且可能会盖到其他元素上面去。我们需要的效果是像果冻一样挤压其他元素。使其挪到后面或下面。

            瀑布布局

            视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

             瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。

    瀑布流布局的实现_AI3D_WebEngineer的博客-CSDN博客瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。https://blog.csdn.net/weixin_42274805/article/details/132981042

             

            flex布局

             弹性盒模型。也是纯CSS布局。具体可以看廖雪峰的Flex 布局教程：语法篇 - 阮一峰的网络日志icon-default.png?t=N7T8https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

            但是做编辑器是不能选择flex布局的，为什么？请看下面Grid布局的介绍 

                    

            Grid布局

            网络布局，目前唯一一种 CSS 二维布局。擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

            与flex布局的区别：flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

      

            布局实现
    1. <body>
    2.     <div class="container">
    3.         <div class="item">
    4.             <img src="img/bg1.png" alt="" />
    5.         div>
    6.         <div class="item">
    7.             <img src="img/bg2.png" alt="" />
    8.         div>
    9.         <div class="item">
    10.             <img src="img/bg3.png" alt="" />
    11.         div>
    12.         <div class="item">
    13.             <img src="img/bg4.png" alt="" />
    14.         div>
    15.         <div class="item">
    16.             <img src="img/bg5.png" alt="" />
    17.         div>
    18.         <div class="item">
    19.             <img src="img/bg6.png" alt="" />
    20.         div>
    21.     div>
    22. body>

            此时我们只需要对container这个父容器添加grid属性就好：

    1. <style>
    2.     .container {
    3.         /* 声明一个容器 */
    4.         display: grid;
    5.         /*  声明列的宽度  */
    6.         grid-template-columns: repeat(3, 200px);
    7.         /*  声明行间距和列间距  */
    8.         grid-gap: 20px;
    9.         /*  声明行的高度  */
    10.         grid-template-rows: 100px 200px;
    11.     }
    12.  
    13.     .item img {
    14.         width: 100%;
    15.         height: 100%;
    16.     }
    17. style>

        grid-template-columns: repeat(3, 200px);

        这里的2是分为3列的意思，200px是列宽

     

           

            容器

             我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。比如上面 .container所在的元素为一个网格容器，其直系子元素将成为网格项目。 

            网格轨道

            grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。

            

            网格单元

            一个网格单元是在一个网格元素中最小的单位

            1 2 3 4 5 6 各是一个网络单元

            网格线

            划分网格的线，称为"网格线"。这对我们来说是不可见的。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。

            详细的语法请看：

    最强大的 CSS 布局 —— Grid 布局 - 掘金Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 讲到布局，…icon-default.png?t=N7T8https://juejin.cn/post/6854573220306255880        

            我的选择

                   Grid布局是最佳选择。因为二维布局提供的网格概念，使得元素的大小和位置可以被合理配置。但是Grid布局的兼容性很一般。考虑到有拖拽和放大缩小功能，且是基于Vue2的项目，我选择了一个网格（栅格）拖拽布局库vue-grid-layout 。他可以完美地实现自定义布局功能。

    编辑器页面

              这是一个完整的编辑器页面。除开上部的公共导航栏之外。编辑器由左边的组件栏和右边的设计器组成。

            组件的设计器设计为弹窗模式。

            拖拽、移动的浮窗效果。

            dashboard-design.vue：编辑器外壳，通过插槽来插入页面模块

    1. // dashboard-design.vue
    2. <template>
    3.   <div :class="$style.design">
    4.     <global-header :class="$style.header">
    5.       <template slot="center">
    6.         <slot name="header-center" />
    7.       template>
    8.     global-header>
    9.     <slot />
    10.   div>
    11. template>

            index.vue:仪表盘编辑器文件

    1. // index.vue
    2.  
    3. <template>
    4.   <dashboard-design-layout
    5.     :id="$route.params.id"
    6.   >
    7.     // 头部
    8.     <dashboard-design-header-center
    9.       slot="header-center"
    10.     />
    11.     <template>
    12.       <div
    13.         id="dashboardContent"
    14.       >
    15.         // 左边的组件列表
    16.         <a-card
    17.           :class="$style.controls"
    18.         >
    19.           <control-list :dragType.sync="dragType" @add="handleClickAddField" />
    20.         a-card>
    21.         // 右边设计器区域
    22.         <a-card :class="$style.main">
    23.          ....
    24.         a-card>
    25.       div>
    26.   dashboard-design-layout>
    27. template>

            此时一个简单的编辑机页面结构就出来了，紧接着我们需要给它添加CSS样式

    设计器概览

    1.  <a-card :class="$style.main">
    2.     // 按钮
    3.           <div :class="$style.action">
    4.             <div :class="$style.actionLeft">
    5.               <a-button type="link" @click="handlePreview">
    6.                 <x-icon type="tc-icon-search-square" />
    7.                 <span>预览span>
    8.               a-button>
    9.             div>
    10.             <div :class="$style.actionRight">
    11.               <async-button type="primary" :click="validateAndSave">
    12.                    保存
    13.               async-button>
    14.             div>
    15.           div>
    16.     // 设计器
    17.           <drag-container
    18.             ref="container"
    19.             :fields="fields"
    20.             :dragType.sync="dragType"
    21.             :selectedField="selectedField"
    22.             :dashboard="form"
    23.             :initFieldStyle="initFieldStyle"
    24.             @add="handleAdd"
    25.             @edit="handleEdit"
    26.             @delete="handleDelete"
    27.             @select="selectField"
    28.           />
    29. a-card>

             我们关注drag-container.vue是怎么样的实现，它一定会有的两个功能：

            ① 能展示现有的设计布局

            ② 能自适应拖拽进来的元素，并允许用户自定义它的位置和大小

            让我们看看它的实现：

    1. // drag-container.vue
    2. <template>
    3.   <div
    4.     id="dashboardLayout"
    5.     :style="styleCSSVariable"
    6.   >
    7.     <background :background="themeBackground">
    8.         <grid-layout
    9.           ref="layout"
    10.           :class="$style.layout"
    11.           :layout.sync="layout"
    12.           :colNum="60"
    13.           :rowHeight="15"
    14.           @dragover.native="handleDrag"
    15.           @dragleave.native="handleDragLeave"
    16.           @drop.native="handleDrop"
    17.         >
    18.              ....
    19.         grid-layout>
    20.     background>
    21.   div>
    22. template>

            可以看到，根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是：

    1. get styleCSSVariable() {
    2.     return createDashboardCSS(this.dashboard.setting.style);
    3. }

            这里可以根据当前仪表盘的用户设置风格（如“暗黑”、“科技”、“酷炫”）进行css样式管理。return了诸如这些设置：

    1.  return {
    2.     // 文字颜色
    3.     '--font': '#cccccc',
    4.     '--font-sub': '#999999',
    5.     '--font-info': '#666666',
    6.     // 辅助文字
    7.     '--font-color-secondary': '#aaaaaa',
    8.     // 提示性文字
    9.     '--font-color-info': '#ff2d2d',
    10.     '--font-active-light': '#ffffff',
    11.  
    12.     // 删除按钮/文字
    13.     '--delete': '#fe5959',
    14.     // 警示色
    15.     '--warning': '#ff9900',
    16.     // 操作成功
    17.     '--success': '#19be6b'
    18.     ....
    19. }

             可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。详情可以看我这篇推文。

    CSS的var()函数用法与JS获取css函数变量值的方法_AI3D_WebEngineer的博客-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/weixin_42274805/article/details/133135688?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22133135688%22%2C%22source%22%3A%22weixin_42274805%22%7D        往下看，这里面套了个background的背景板。紧接着是我们的主角。来自于vue-grid-layout插件的grid-layout画布组件。

    colNum：画布总共设计为60列

    rowHeight：每行高度

    :layout.sync="layout" 这里传入的是当前的布局信息

    @dragover.native 这里响应的是原生的dragover 事件。拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒）

    @dragleave.native 拖拉操作离开当前节点范围时，在当前节点上触发

    @drop.native drag 被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发

          这里为什么要设置三个事件呢？drop响应的是用户放手的事件，dragleave是用户手势离开设计器的时候响应，dragover是用户的手势在设计器里持续响应（刷新状态）。而我们知道，drag原生事件并不只三个：
            dragstart：用户开始拖拉时，在被拖拉的节点上触发。
            dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发。
            dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。

            但这些对于我们设计器来说并无作用。

    设计器拖拽部分（一）

            大概明白了设计器的拖拽设计，紧接着我们来看最关键的数据结构。        ​​​

                 其实很简单，我们只需要传入一个layout-item数组到layout-grid，它就可以正常响应渲染。哪怕数组是乱序的。也就是说layout-grid将严格按照每个layout-item的x/y/w/h进行计算布局

            layout-grid是不关注item的max/min-h/w属性的。因为这个事layout-item自己的事情。也就是说layout-grid甚至只是个容器。它接受的item数组是什么样，就会展示什么样。同时它响应上面的拖拽事件，方便我们生成每个layout-item数据。

            直接先看@drop.native="handleDrop"部分

    1.   /** @name 拖动放置时 **/
    2.   async handleDrop() {
    3.     if (this.isInChildCom) return; // 进入子元素范围则无需触发
    4.     try {
    5.       let field = createDashboardField(this.dragType);
    6.       field.widget.layout = pick(this.dragLayout, 'x', 'y', 'w', 'h');
    7.       this.layout.splice(this.dragLayoutIndex, 1, {
    8.         ...field.widget.layout,
    9.         i: field.pkId,
    10.       });
    11.       this.$emit('add', field);
    12.     } catch (e) {
    13.       this.layout.splice(this.dragLayoutIndex, 1);
    14.       throw e;
    15.     }
    16.   }
    17.   /** @name 当前拖拽元素的layout **/
    18.   dragLayout = null;
    19.  /** @name 当前拖拽元素的index **/
    20.   get dragLayoutIndex() {
    21.     return this.layout.indexOf(this.dragLayout);
    22.   }

            我把代码精简一下，大概是先创建一个拖拽组件的实例（谨慎地用try方法进行尝试，只要中途有抛错就把这个拖拽进来的元素切割掉）。紧接着更新layout。并把新增的组件实例抛出去（做数据存储）。

            请注意，this.layout仅仅用于当前页面layout-grid的渲染。不参与数据存储。

    编辑器概览

            

                 结合一下代码来看看：

    1. // index.vue
    2. <a-card>
    3.     
    4.     <control-list :dragType.sync="dragType" @add="handleClickAddField" />
    5. a-card>
    6. <a-card>
    7.     
    8.    <drag-container
    9.       :dragType.sync="dragType"
    10.       :selectedField="selectedField"
    11.     />
    12. a-card>
    13.  
    14. <script>
    15.   ....
    16.   /** @name 左边栏拖动时的组件类型 **/
    17.   dragType = null;
    18. script>

            这里用了sync传值的语法糖。让子组件能够通过emit修改父组件的值。

    1. // control-list.vue
    2.  
    4.  
    5. ...
    6.  
    7. @Prop() dragType;
    8.  
    9. handleDragStart(type, draggable = true) {
    10.   if (draggable) {
    11.     this.$emit('update:dragType', type);
    12.   }
    13. }
    14.  
    15. handleDragEnd(draggable = true) {
    16.   if (draggable) {
    17.     this.$emit('update:dragType', null);
    18.   }
    19. }

        control-list.vue这里触发拖拽开始的事件就会emit一个有效的类型值给index.vue，如果拖拽停止就会emit一个空类型值给index。index再通过pro传参给drag-container，这里drag-container为什么也要用sync呢？因为当拖拽放置完成之后，drag-container会把类型值清空，以恢复起始的模式。

    1. // drag-container.vue
    2.