big-model-web/src/views/workflow/panel/index.vue

<template>
  <transition name="slide">
    <div class="panel" v-if="show">
      <div class="panel-header">
        <h3>{{ nodeDataCpt.title }}</h3>
        <button @click="$emit('update:show', false)">×</button>
      </div>
      <div class="panel-content">
        <template v-if="nodeDataCpt.type === 'root'">
          <rootPanel :node="node"/>
        </template>
        <template v-if="nodeDataCpt.type === 'if-else'">
          <ifElsePanel :node="node"/>
        </template>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, reactive, ref} from "vue";
import rootPanel from './root/index.vue'
import ifElsePanel from './is-else/index.vue'

const emits = defineEmits([])
const props = defineProps({
  show: {},
  node: <any>{},
})
const {proxy}: any = getCurrentInstance()
const state: any = reactive({})
const nodeDataCpt = computed(() => props.node?.data || {})
</script>

<style lang="scss" scoped>
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  .panel-header {
    padding: 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .panel-content {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
  }
}

/* 过渡动画 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%);
}
</style>