sunmicro-lvgl-designer/src/renderer/src/views/designer/workspace/composite/eventEdit/ActionNode.vue

<template>
  <div class="min-h-32px bg-#4EB2BF rounded-4px flex items-center pr-4px">
    <div class="w-160px text-#fff grid place-items-center shrink-0">
      {{ node.name }}
    </div>
    <div>
      <!-- 自定义代码 -->
      <div v-if="node.name === 'custom_code'" class="w-120px">
        <el-select style="width: 120px" v-model="value" size="small">
          <el-option
            v-for="item in projectStore.project?.methods || []"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <!-- 字符串 -->
      <div v-if="node?.config?.data?.valueType === 'string'">
        <el-input v-model="value" size="small" />
      </div>
      <!-- 数字 -->
      <div v-if="node?.config?.data?.valueType === 'number'">
        <el-input-number
          v-model="value"
          :min="node.config.data?.min"
          :max="node.config.data?.max"
          size="small"
        />
      </div>
      <!-- 布尔 -->
      <div v-if="node?.config?.data?.valueType === 'boolean'">
        <el-switch v-model="value" size="small" />
      </div>
      <!-- 枚举 -->
      <div v-if="node?.config?.data?.valueType === 'select'">
        <el-select
          style="width: 160px"
          v-model="value"
          size="small"
          placeholder="please select"
          :multiple="node.config.data?.multiple"
          collapse-tags
          collapse-tags-tooltip
        >
          <el-option
            v-for="item in optionMap?.[node.name] || []"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 颜色 -->
      <div v-if="node?.config?.data?.valueType === 'color'">
        <el-color-picker v-model="value" size="small" />
      </div>
      <!-- 动画 -->
      <div
        v-if="node?.config?.data?.valueType === 'animation'"
        class="py-4px flex flex-col gap-4px"
      >
        <div>
          <span class="inline-block w-80px">动画：</span>
          <el-select
            style="width: 160px"
            v-model="value.animation"
            size="small"
            placeholder="select animation"
          >
            <el-option
              v-for="item in projectStore.project?.animations || []"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
        <div>
          <span class="inline-block w-80px">动画前事件：</span>
          <el-select
            style="width: 160px"
            v-model="value.before"
            size="small"
            placeholder="before event"
            clearable
          >
            <el-option
              v-for="item in projectStore.project?.methods || []"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div>
          <span class="inline-block w-80px">动画后事件：</span>
          <el-select
            style="width: 160px"
            v-model="value.after"
            size="small"
            placeholder="after event"
            clearable
          >
            <el-option
              v-for="item in projectStore.project?.methods || []"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <!-- 旋转 -->
      <div v-if="node?.config?.data?.valueType === 'rotate'" class="py-4px flex flex-col gap-4px">
        <div>
          <span class="inline-block w-40px">X：</span>
          <el-input-number
            v-model="value.x"
            :min="node.config.data?.min"
            :max="node.config.data?.max"
            size="small"
          />
        </div>
        <div>
          <span class="inline-block w-40px">Y：</span>
          <el-input-number
            v-model="value.y"
            :min="node.config.data?.min"
            :max="node.config.data?.max"
            size="small"
          />
        </div>
        <div>
          <span class="inline-block w-40px">度数：</span>
          <el-input-number
            v-model="value.angle"
            :min="node.config.data?.min"
            :max="node.config.data?.max"
            size="small"
          />
        </div>
      </div>
    </div>
    <!-- 删除按钮 -->
    <div
      v-if="node.name !== 'custom_code'"
      class="mx-4px p-2px cursor-pointer"
      @click="emit('delete', node.id)"
    >
      <LuTrash2 size="12px" class="text-accent-red" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NodeItemType } from './type'
import { ref, watch } from 'vue'
import { LuTrash2 } from 'vue-icons-plus/lu'
import { useProjectStore } from '@/store/modules/project'
import { optionMap } from './config'

const emit = defineEmits<{
  (e: 'delete', id: string): void
  (e: 'update', node: NodeItemType): void
}>()
const props = defineProps<{
  node: NodeItemType
}>()
const projectStore = useProjectStore()

const value = ref(props.node.value)

watch(
  () => value.value,
  (val) => {
    emit('update', { ...props.node, value: val })
  },
  {
    deep: true
  }
)
</script>

<style scoped></style>