Vue进阶之Vue无代码可视化项目（七）

右侧栏配置——配置面板

右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。

• src
  • components
  • RightPanel.vue

components/RightPanel.vue

先将左侧栏复制一份粘到右侧栏上

<script setup lang="ts">
import {
     Lightning, Share } from '@icon-park/vue-next'
import {
      ref } from 'vue';

import {
     SmoothDndContainer} from '@/components/SmoothDnd/SmoothDndContainer'
import {
     SmoothDndDraggable} from '@/components/SmoothDnd/SmoothDndDraggable'

type Mode = 'outline'|'blocks'|null
const mode = ref<Mode>(null)

const toggleMode = (newMode:Mode) => {
     
  if(newMode === mode.value){
     
    mode.value = null
  }else{
     
    mode.value = newMode
  }
}
</script>

<template>
  <div class="left-panel-wrapper">
    <div class="left-panel-left">
      <div class="btn" :class="{active:mode==='outline'}" @click="()=>toggleMode('outline')">
        <Lightning />
      </div>
      <div class="btn" :class="{active:mode==='blocks'}" @click="()=>toggleMode('blocks')">
        <Share />
      </div>
    </div>
    <!-- 接入动画 -->
    <transition name="app-left-panel-drawer">
      <div class="left-panel-content" v-show="mode">
          {
  {mode}}
          <!-- 面板中使用SmoothDnd -->
          <SmoothDndContainer class="block-group" 
          behaviour="copy"
          tag="div"  group-name="blocks" 
          @drag-start="(e,v)=>console.log(e,v)" 
          @drag-leave="(e,v)=>console.log(e,v)"
          @drop="(e)=>console.log('drop',e)"
          :get-child-payload="(index:number)=>index+1"
          >
            <SmoothDndDraggable v-for="i in 10" :key="i">
              <div class="block-item">{
  {i}}</div>
            </SmoothDndDraggable>
          </SmoothDndContainer>
       </div>
    </transition>
  </div>
</template>

<style scoped>
.left-panel-wrapper {
     
  display: flex;
  height: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e8e8e8;
}
.left-panel-left{
     
  display: flex;
  padding:0 10px;
  flex-direction: column;
  align-items: center;
  width: 50px;
  height: 100%;
  background-color: #e8e8e8;
}
.btn{
     
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 6px;
  margin-top:20px;
  /* &:hover{
    background-color: #f5f5f5;
  } */
}
.btn:hover{
     
  background-color: #f5f5f5;
}
/* 被激活时候的特定样式 */
.btn.active{
     
  background-color: rgb(0,196,83);
  color: #fff;
}
.left-panel-content{
     
  flex: 1;
  width: 280px;
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
}

/* 下面我们会解释这些 class 是做什么的 */
.app-left-panel-drawer-enter-active,
.app-left-panel-drawer-leave-active {
     
  transition: width 0.1s cubic-bezier(0.3, 0.1, 0.3, 1);
}

.app-left-panel-drawer-enter-from,
.app-left-panel-drawer-leave-to {
     
  width: 0;
}

.app-left-panel-drawer-content {
     
  width: calc(var(--panel-width) - 60px);
  height: 100%;
  padding: 16px;
}

.block-item{
     
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  transition:background-color 0.3s