sunmicro-lvgl-designer/src/renderer/src/views/designer/config/property/components/StyleBackground.vue

<template>
  <div>
    <el-form-item label="背景颜色" label-position="left" label-width="70px">
      <!-- 支持变量 -->
      <VariableBindWrapper v-model="color" :variable-config="{ type: 'int32_t' }">
        <div class="flex items-center">
          <ColorModal
            v-model:pureColor="pureColor"
            v-model:gradientColor="gradientColor"
            :useType="useType"
            :width="width"
            :height="height"
          />
          <span class="text-text-active">{{
            typeof modelValue?.color === 'object' ? '渐变颜色' : modelValue?.color
          }}</span>
        </div>
      </VariableBindWrapper>
    </el-form-item>
    <el-form-item v-if="!onlyColor" label="背景图片" label-position="left" label-width="70px">
      <ImageSelect v-model="image" />
    </el-form-item>
    <el-form-item v-if="!onlyColor" label="图片透明度" label-position="left" label-width="70px">
      <!-- 支持变量 -->
      <VariableBindWrapper v-model="imageAlpha" :variable-config="{ type: 'uint8_t' }">
        <div class="w-full flex gap-20px items-center">
          <el-slider
            v-model="imageAlpha"
            :disabled="!modelValue?.image"
            :max="255"
            :min="0"
            style="flex: 1"
          ></el-slider>
          <span class="text-text-active inline w-30px cursor-pointer">
            {{ imageAlpha }}
          </span>
        </div>
      </VariableBindWrapper>
    </el-form-item>
    <el-form-item v-if="!onlyColor" label="图片遮罩" label-position="left" label-width="70px">
      <!-- 支持变量 -->
      <VariableBindWrapper v-model="imageColor" :variable-config="{ type: 'int32_t' }">
        <div class="flex items-center">
          <ColorPicker
            use-type="pure"
            picker-type="chrome"
            format="hex8"
            v-model:pureColor="imageColor"
            :disabled="!modelValue?.image"
          />
          <span class="text-text-active">{{ imageColor }}</span>
        </div>
      </VariableBindWrapper>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ColorPicker, ColorModal } from '@/components'
import ImageSelect from './ImageSelect.vue'
import { useProjectStore } from '@/store/modules/project'
import VariableBindWrapper from './VariableBindWrapper.vue'

import type { GradientColor } from '@/lvgl-widgets/type'

withDefaults(
  defineProps<{
    useType?: 'pure' | 'gradient' | 'both'
    onlyColor?: boolean
  }>(),
  {
    useType: 'both'
  }
)

const modelValue = defineModel<{
  color: string | GradientColor
  image?: {
    imgId: string
    recolor: string
    alpha: number
  }
}>('modelValue')

const projectStore = useProjectStore()

const width = computed(() => {
  if (projectStore.activeWidget?.type === 'page') return projectStore.activeScreen?.width
  return projectStore.activeWidget?.props?.width
})
const height = computed(() => {
  if (projectStore.activeWidget?.type === 'page') return projectStore.activeScreen?.height
  return projectStore.activeWidget?.props?.height
})

// 颜色
const color = computed({
  get() {
    return modelValue.value?.color
  },
  set(val: string) {
    if (modelValue.value) {
      modelValue.value.color = val
    }
  }
})

// 纯色
const pureColor = computed({
  get() {
    return typeof modelValue.value?.color === 'string' ? modelValue.value?.color : undefined
  },
  set(val: string) {
    if (modelValue.value) {
      modelValue.value.color = val
    }
  }
})
// 渐变
const gradientColor = computed({
  get() {
    return typeof modelValue.value?.color === 'object' ? modelValue.value?.color : undefined
  },
  set(val: GradientColor) {
    if (modelValue.value?.color) {
      modelValue.value.color = val
    }
  }
})
// 图像颜色
const imageColor = computed({
  get() {
    return modelValue.value?.image?.recolor || '#ffffff00'
  },
  set(val: string) {
    if (modelValue.value?.image) {
      modelValue.value.image.recolor = val
    }
  }
})
// 图像透明度
const imageAlpha = computed({
  get() {
    return modelValue.value?.image?.alpha
  },
  set(val: number) {
    if (modelValue.value?.image) {
      modelValue.value.image.alpha = val
    }
  }
})

const image = computed({
  get() {
    return modelValue.value?.image?.imgId
  },
  set(val: string) {
    if (modelValue.value) {
      if (!modelValue.value?.image) {
        modelValue.value.image = {
          imgId: '',
          recolor: '#ffffff00',
          alpha: 255
        }
      }
      modelValue.value.image.imgId = val
      if (!imageColor.value) {
        imageColor.value = '#ffffff00'
      }
    }
  }
})
</script>