sunmicro-lvgl-designer/src/renderer/src/lvgl-widgets/span-group/Config.vue

<template>
  <div>
    <el-card class="mb-12px" body-class="pr-0px!">
      <template #header>
        <div class="flex items-center justify-between">
          <span>内容</span>
          <span class="flex gap-4px">
            <LuPlus class="cursor-pointer" @click="handleAdd" size="14px" />
            <LuTrash2 class="cursor-pointer" @click="handleClear" size="14px" />
          </span>
        </div>
      </template>
      <el-scrollbar height="120px">
        <div
          v-for="(item, index) in props.values?.value || []"
          :key="v4()"
          class="flex items-center pr-12px"
          @click="handleEdit(item)"
        >
          <span class="flex-1 truncate text-#00ff00 cursor-pointer">{{ item.text }}</span>
          <LuTrash2 class="cursor-pointer shrink-0" @click.stop="handleDelete(index)" size="14px" />
        </div>
      </el-scrollbar>
    </el-card>
    <el-dialog v-model="dialogVisible" title="编辑文本" width="440px">
      <el-form ref="formRef" :model="formData" label-position="left" label-width="60px">
        <el-form-item label="字体颜色">
          <ColorPicker
            v-model:pureColor="formData.text_color"
            format="hex8"
            picker-type="chrome"
            use-type="pure"
          >
            <template #trigger>
              <BiFontColor size="22px" :style="{ color: formData.text_color }" />
            </template>
          </ColorPicker>
          <span class="text-text-active">{{ formData.text_color }}</span>
        </el-form-item>
        <el-form-item label="字体" label-width="60px">
          <el-select-v2
            v-model="formData.font_family"
            placeholder="请选择"
            :options="fontOptions"
          />
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number
            v-model="formData.font_size"
            controls-position="right"
            placeholder="请输入"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="">
          <el-radio-group v-model="formData.text_decor">
            <el-radio-button :value="LineEnum.LV_TEXT_DECOR_NONE">
              <el-tooltip content="none">
                <MdNotInterested size="14px" />
              </el-tooltip>
            </el-radio-button>
            <el-radio-button :value="LineEnum.LV_TEXT_DECOR_UNDERLINE">
              <el-tooltip content="underline">
                <RxUnderline size="14px" />
              </el-tooltip>
            </el-radio-button>
            <el-radio-button :value="LineEnum.LV_TEXT_DECOR_STRIKETHROUGH">
              <el-tooltip content="strikethrough">
                <RxStrikethrough size="14px" />
              </el-tooltip>
            </el-radio-button>
            <el-radio-button
              :value="LineEnum['LV_TEXT_DECOR_UNDERLINE | LV_TEXT_DECOR_STRIKETHROUGH']"
            >
              <el-tooltip content="strikethrough and underline">
                <GoStrikethrough size="14px" />
              </el-tooltip>
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文本">
          <el-input type="textarea" v-model="formData.text" placeholder="请输入文本" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { type SpanItem, LineEnum } from './data'

import { computed, type Ref, ref } from 'vue'
import { LuPlus, LuTrash2 } from 'vue-icons-plus/lu'
import { v4 } from 'uuid'
import { ColorPicker } from '@/components'
import { BiFontColor } from 'vue-icons-plus/bi'
import { MdNotInterested } from 'vue-icons-plus/md'
import { RxUnderline, RxStrikethrough } from 'vue-icons-plus/rx'
import { GoStrikethrough } from 'vue-icons-plus/go'
import { useProjectStore } from '@/store/modules/project'

const props = defineProps<{
  values: Ref<SpanItem[]>
}>()

const dialogVisible = ref(false)
const formData = ref<SpanItem>({
  text: '',
  text_color: '',
  font_family: '',
  font_size: 0,
  text_decor: LineEnum.LV_TEXT_DECOR_NONE
})

const projectStore = useProjectStore()
// 字体选项
const fontOptions = computed(() => {
  const list = (projectStore.project?.resources.fonts || []).map((font) => {
    return {
      label: font.fileName,
      value: font.id
    }
  })
  return [{ label: '默认字体', value: 'xx' }, ...list]
})

/**
 * 添加文本项
 */
const handleAdd = () => {
  props.values?.value?.push({
    text: 'hello world',
    text_color: '#000000ff',
    font_family: 'xx',
    font_size: 16,
    text_decor: LineEnum.LV_TEXT_DECOR_NONE
  })
}

/**
 * 删除文本项
 */
const handleDelete = (index: number) => {
  props.values?.value?.splice(index, 1)
}

/**
 * 清除文本项
 */
const handleClear = () => {
  props.values.value = []
}

const handleEdit = (record: SpanItem) => {
  formData.value = record
  dialogVisible.value = true
}
</script>

<style scoped></style>