feat: 新增日期、数字时钟控件

src/renderer/components.d.ts

@@ -54,6 +54,7 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']
@@ -117,6 +118,7 @@ declare global {
   const ElSwitch: typeof import('element-plus/es')['ElSwitch']
   const ElTabPane: typeof import('element-plus/es')['ElTabPane']
   const ElTabs: typeof import('element-plus/es')['ElTabs']
+  const ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
   const ElTooltip: typeof import('element-plus/es')['ElTooltip']
   const ElTree: typeof import('element-plus/es')['ElTree']
   const ElUpload: typeof import('element-plus/es')['ElUpload']

src/renderer/src/locales/en_US.json

@@ -139,5 +139,7 @@
   "spinbox": "Spinbox",
   "animimg": "Animimg",
   "animation": "Animation",
-  "time": "Time"
+  "time": "Time",
+  "date": "Date",
+  "dagitalClock": "DagitalClock"
 }

src/renderer/src/locales/zh_CN.json

@@ -139,5 +139,7 @@
   "spinbox": "微调框",
   "animimg": "动画图片",
   "animation": "动画",
-  "time": "时间"
+  "time": "时间",
+  "date": "日期",
+  "dagitalClock": "数字时钟"
 }

src/renderer/src/lvgl-widgets/dagital-clock/DagitalClock.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    ref="boxRef"
+    :style="styleMap?.mainStyle"
+    class="w-full h-full relative overflow-hidden box-border flex items-start"
+    :class="
+      styleMap?.mainStyle?.textAlign === 'left'
+        ? 'justify-start'
+        : styleMap?.mainStyle?.textAlign === 'right'
+          ? 'justify-end'
+          : 'justify-center'
+    "
+  >
+    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
+    <span ref="txtRef" class="z-2 lv_label_txt break-all whitespace-pre">
+      <span>{{ showSecond ? timeText : timeText?.slice(0, 5) }}</span>
+      <span v-if="showAmPm" class="ml-8px">{{ isAM ? 'AM' : 'PM' }}</span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useWidgetStyle } from '../hooks/useWidgetStyle'
+import ImageBg from '../ImageBg.vue'
+
+const props = defineProps<{
+  width: number
+  height: number
+  timeText?: string
+  styles: any
+  state?: string
+  part?: string
+  showSecond?: boolean
+  showAmPm?: boolean
+}>()
+
+const styleMap = useWidgetStyle({
+  widget: 'datetext',
+  props
+})
+
+const isAM = computed(() => {
+  const hour = Number(props.timeText?.split(':')[0])
+  return hour < 12
+})
+</script>
+
+<style scoped>
+.lv_label_txt::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/renderer/src/lvgl-widgets/dagital-clock/index.ts

@@ -0,0 +1,272 @@
+import DagitalClock from './DagitalClock.vue'
+import icon from '../assets/icon/icon_32time2.svg'
+import type { IComponentModelConfig } from '../type'
+import i18n from '@/locales'
+import { flagOptions, stateOptions, stateList } from '@/constants'
+import defaultStyle from './style.json'
+import { dayjs } from 'element-plus'
+
+export default {
+  label: i18n.global.t('dagitalClock'),
+  icon,
+  component: DagitalClock,
+  key: 'dagital_clock',
+  group: i18n.global.t('time'),
+  sort: 1,
+  defaultStyle,
+  parts: [
+    {
+      name: 'main',
+      stateList
+    }
+  ],
+  defaultSchema: {
+    name: 'label',
+    props: {
+      x: 0,
+      y: 0,
+      width: 130,
+      height: 30,
+      flags: [
+        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
+        'LV_OBJ_FLAG_SCROLLABLE',
+        'LV_OBJ_FLAG_SCROLL_ELASTIC',
+        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
+        'LV_OBJ_FLAG_SCROLL_CHAIN_HOR',
+        'LV_OBJ_FLAG_SCROLL_CHAIN_VER',
+        'LV_OBJ_FLAG_SCROLL_CHAIN',
+        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
+        'LV_OBJ_FLAG_SNAPPABLE',
+        'LV_OBJ_FLAG_PRESS_LOCK',
+        'LV_OBJ_FLAG_GESTURE_BUBBLE'
+      ],
+      states: [],
+      timeText: '09:30:50',
+      // 展示秒
+      showSecond: true,
+      // 上午/下午
+      showAmPm: false
+    },
+    styles: [
+      {
+        part: {
+          name: 'main',
+          state: 'default'
+        },
+        background: {
+          color: '#FFFFFF00',
+          image: {
+            imgId: '',
+            recolor: '#00000000',
+            alpha: 255
+          }
+        },
+        text: {
+          color: '#212121ff',
+          family: 'xx',
+          size: 16,
+          align: 'left',
+          decoration: 'none'
+        },
+        spacer: {
+          letterSpacing: 0
+        },
+        border: {
+          color: '#000000ff',
+          width: 0,
+          radius: 0,
+          side: ['all']
+        },
+        outline: {
+          color: '#000000ff',
+          width: 0,
+          pad: 0
+        },
+        padding: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        shadow: {
+          color: '#2092f5ff',
+          offsetX: 0,
+          offsetY: 0,
+          spread: 0,
+          width: 0
+        },
+        transform: {
+          width: 0,
+          height: 0,
+          translateX: 0,
+          translateY: 0,
+          originX: 0,
+          originY: 0,
+          rotate: 0,
+          scale: 256
+        }
+      }
+    ]
+  },
+  config: {
+    // 组件属性
+    props: [
+      {
+        label: '名称',
+        field: 'name',
+        valueType: 'text',
+        componentProps: {
+          placeholder: '请输入名称',
+          type: 'text'
+        }
+      },
+      {
+        label: '位置/大小',
+        valueType: 'group',
+        children: [
+          {
+            label: '',
+            field: 'props.x',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: -10000,
+              max: 10000
+            },
+            slots: { prefix: 'X' }
+          },
+          {
+            label: '',
+            field: 'props.y',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: -10000,
+              max: 10000
+            },
+            slots: { prefix: 'Y' }
+          },
+          {
+            label: '',
+            field: 'props.width',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: 1,
+              max: 10000
+            },
+            slots: { prefix: 'W' }
+          },
+          {
+            label: '',
+            field: 'props.height',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: 1,
+              max: 10000
+            },
+            slots: { prefix: 'H' }
+          }
+        ]
+      },
+      {
+        label: '标识',
+        field: 'props.flags',
+        valueType: 'checkbox',
+        componentProps: {
+          options: flagOptions,
+          defaultCollapsed: true
+        }
+      },
+      {
+        label: '状态',
+        field: 'props.states',
+        valueType: 'checkbox',
+        componentProps: {
+          options: stateOptions,
+          defaultCollapsed: true
+        }
+      }
+    ],
+    coreProps: [
+      {
+        label: '时间',
+        field: 'props.timeText',
+        valueType: 'time',
+        componentProps: {
+          arrowControl: true
+        }
+      },
+      {
+        label: '展示秒',
+        field: 'props.showSecond',
+        valueType: 'switch'
+      },
+      {
+        label: '上午/下午',
+        field: 'props.showAmPm',
+        valueType: 'switch'
+      }
+    ],
+    // 组件样式
+    styles: [
+      {
+        label: '模块状态',
+        field: 'part',
+        valueType: 'part'
+      },
+      {
+        label: '背景',
+        field: 'background',
+        valueType: 'background'
+      },
+      {
+        label: '字体',
+        field: 'text',
+        valueType: 'font'
+      },
+      {
+        label: '间距',
+        field: 'spacer',
+        valueType: 'spacer',
+        componentProps: {
+          hideLineHeight: true
+        }
+      },
+      {
+        label: '内边距',
+        field: 'padding',
+        valueType: 'padding'
+      },
+      {
+        label: '边框',
+        field: 'border',
+        valueType: 'border'
+      },
+      {
+        label: '轮廓',
+        field: 'outline',
+        valueType: 'outline'
+      },
+      {
+        label: '内边距',
+        field: 'padding',
+        valueType: 'padding'
+      },
+      {
+        label: '阴影',
+        field: 'shadow',
+        valueType: 'shadow'
+      },
+      {
+        label: '变换',
+        field: 'transform',
+        valueType: 'transform',
+        componentProps: {
+          showWH: true
+        }
+      }
+    ]
+  }
+} as IComponentModelConfig

src/renderer/src/lvgl-widgets/dagital-clock/style.json

@@ -0,0 +1,64 @@
+{
+  "widget": "dagital-clock",
+  "styleName": "defualt",
+  "part": [
+    {
+      "partName": "main",
+      "defaultStyle": {
+        "background": {
+          "color": "#FFFFFF00",
+          "image": {
+            "imgId": "",
+            "recolor": "#00000000",
+            "alpha": 255
+          }
+        },
+        "text": {
+          "color": "#212121ff",
+          "family": "xx",
+          "size": 16,
+          "align": "left",
+          "decoration": "none"
+        },
+        "spacer": {
+          "letterSpacing": 0
+        },
+        "border": {
+          "color": "#000000ff",
+          "width": 0,
+          "radius": 0,
+          "side": ["all"]
+        },
+        "outline": {
+          "color": "#000000ff",
+          "width": 0,
+          "pad": 0
+        },
+        "padding": {
+          "top": 0,
+          "right": 0,
+          "bottom": 0,
+          "left": 0
+        },
+        "shadow": {
+          "color": "#2092f5ff",
+          "offsetX": 0,
+          "offsetY": 0,
+          "spread": 0,
+          "width": 0
+        },
+        "transform": {
+          "width": 0,
+          "height": 0,
+          "translateX": 0,
+          "translateY": 0,
+          "originX": 0,
+          "originY": 0,
+          "rotate": 0,
+          "scale": 256
+        }
+      },
+      "state": []
+    }
+  ]
+}

src/renderer/src/lvgl-widgets/datetext/DateText.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    ref="boxRef"
+    :style="styleMap?.mainStyle"
+    class="w-full h-full relative overflow-hidden box-border flex items-start"
+    :class="
+      styleMap?.mainStyle?.textAlign === 'left'
+        ? 'justify-start'
+        : styleMap?.mainStyle?.textAlign === 'right'
+          ? 'justify-end'
+          : 'justify-center'
+    "
+  >
+    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
+    <span ref="txtRef" class="z-2 lv_label_txt break-all whitespace-pre">{{ text }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWidgetStyle } from '../hooks/useWidgetStyle'
+import ImageBg from '../ImageBg.vue'
+
+const props = defineProps<{
+  width: number
+  height: number
+  text?: string
+  styles: any
+  state?: string
+  part?: string
+}>()
+
+const styleMap = useWidgetStyle({
+  widget: 'datetext',
+  props
+})
+</script>
+
+<style scoped>
+.lv_label_txt::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/renderer/src/lvgl-widgets/datetext/index.ts

@@ -0,0 +1,260 @@
+import DateText from './DateText.vue'
+import icon from '../assets/icon/icon_33date.svg'
+import type { IComponentModelConfig } from '../type'
+import i18n from '@/locales'
+import { flagOptions, stateOptions, stateList } from '@/constants'
+import defaultStyle from './style.json'
+import { dayjs } from 'element-plus'
+
+export default {
+  label: i18n.global.t('date'),
+  icon,
+  component: DateText,
+  key: 'datetext',
+  group: i18n.global.t('time'),
+  sort: 1,
+  defaultStyle,
+  parts: [
+    {
+      name: 'main',
+      stateList
+    }
+  ],
+  defaultSchema: {
+    name: 'label',
+    props: {
+      x: 0,
+      y: 0,
+      width: 130,
+      height: 30,
+      flags: [
+        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
+        'LV_OBJ_FLAG_SCROLLABLE',
+        'LV_OBJ_FLAG_SCROLL_ELASTIC',
+        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
+        'LV_OBJ_FLAG_SCROLL_CHAIN_HOR',
+        'LV_OBJ_FLAG_SCROLL_CHAIN_VER',
+        'LV_OBJ_FLAG_SCROLL_CHAIN',
+        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
+        'LV_OBJ_FLAG_SNAPPABLE',
+        'LV_OBJ_FLAG_PRESS_LOCK',
+        'LV_OBJ_FLAG_GESTURE_BUBBLE'
+      ],
+      states: [],
+      text: dayjs().format('YYYY/MM/DD')
+    },
+    styles: [
+      {
+        part: {
+          name: 'main',
+          state: 'default'
+        },
+        background: {
+          color: '#FFFFFF00',
+          image: {
+            imgId: '',
+            recolor: '#00000000',
+            alpha: 255
+          }
+        },
+        text: {
+          color: '#212121ff',
+          family: 'xx',
+          size: 16,
+          align: 'left',
+          decoration: 'none'
+        },
+        spacer: {
+          letterSpacing: 0
+        },
+        border: {
+          color: '#000000ff',
+          width: 0,
+          radius: 0,
+          side: ['all']
+        },
+        outline: {
+          color: '#000000ff',
+          width: 0,
+          pad: 0
+        },
+        padding: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        shadow: {
+          color: '#2092f5ff',
+          offsetX: 0,
+          offsetY: 0,
+          spread: 0,
+          width: 0
+        },
+        transform: {
+          width: 0,
+          height: 0,
+          translateX: 0,
+          translateY: 0,
+          originX: 0,
+          originY: 0,
+          rotate: 0,
+          scale: 256
+        }
+      }
+    ]
+  },
+  config: {
+    // 组件属性
+    props: [
+      {
+        label: '名称',
+        field: 'name',
+        valueType: 'text',
+        componentProps: {
+          placeholder: '请输入名称',
+          type: 'text'
+        }
+      },
+      {
+        label: '位置/大小',
+        valueType: 'group',
+        children: [
+          {
+            label: '',
+            field: 'props.x',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: -10000,
+              max: 10000
+            },
+            slots: { prefix: 'X' }
+          },
+          {
+            label: '',
+            field: 'props.y',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: -10000,
+              max: 10000
+            },
+            slots: { prefix: 'Y' }
+          },
+          {
+            label: '',
+            field: 'props.width',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: 1,
+              max: 10000
+            },
+            slots: { prefix: 'W' }
+          },
+          {
+            label: '',
+            field: 'props.height',
+            valueType: 'number',
+            componentProps: {
+              span: 12,
+              min: 1,
+              max: 10000
+            },
+            slots: { prefix: 'H' }
+          }
+        ]
+      },
+      {
+        label: '标识',
+        field: 'props.flags',
+        valueType: 'checkbox',
+        componentProps: {
+          options: flagOptions,
+          defaultCollapsed: true
+        }
+      },
+      {
+        label: '状态',
+        field: 'props.states',
+        valueType: 'checkbox',
+        componentProps: {
+          options: stateOptions,
+          defaultCollapsed: true
+        }
+      }
+    ],
+    coreProps: [
+      {
+        label: '日期',
+        field: 'props.text',
+        valueType: 'date',
+        componentProps: {
+          type: 'date',
+          format: 'YYYY/MM/DD',
+          valueFormat: 'YYYY/MM/DD'
+        }
+      }
+    ],
+    // 组件样式
+    styles: [
+      {
+        label: '模块状态',
+        field: 'part',
+        valueType: 'part'
+      },
+      {
+        label: '背景',
+        field: 'background',
+        valueType: 'background'
+      },
+      {
+        label: '字体',
+        field: 'text',
+        valueType: 'font'
+      },
+      {
+        label: '间距',
+        field: 'spacer',
+        valueType: 'spacer',
+        componentProps: {
+          hideLineHeight: true
+        }
+      },
+      {
+        label: '内边距',
+        field: 'padding',
+        valueType: 'padding'
+      },
+      {
+        label: '边框',
+        field: 'border',
+        valueType: 'border'
+      },
+      {
+        label: '轮廓',
+        field: 'outline',
+        valueType: 'outline'
+      },
+      {
+        label: '内边距',
+        field: 'padding',
+        valueType: 'padding'
+      },
+      {
+        label: '阴影',
+        field: 'shadow',
+        valueType: 'shadow'
+      },
+      {
+        label: '变换',
+        field: 'transform',
+        valueType: 'transform',
+        componentProps: {
+          showWH: true
+        }
+      }
+    ]
+  }
+} as IComponentModelConfig

src/renderer/src/lvgl-widgets/datetext/style.json

@@ -0,0 +1,64 @@
+{
+  "widget": "datetext",
+  "styleName": "defualt",
+  "part": [
+    {
+      "partName": "main",
+      "defaultStyle": {
+        "background": {
+          "color": "#FFFFFF00",
+          "image": {
+            "imgId": "",
+            "recolor": "#00000000",
+            "alpha": 255
+          }
+        },
+        "text": {
+          "color": "#212121ff",
+          "family": "xx",
+          "size": 16,
+          "align": "left",
+          "decoration": "none"
+        },
+        "spacer": {
+          "letterSpacing": 0
+        },
+        "border": {
+          "color": "#000000ff",
+          "width": 0,
+          "radius": 0,
+          "side": ["all"]
+        },
+        "outline": {
+          "color": "#000000ff",
+          "width": 0,
+          "pad": 0
+        },
+        "padding": {
+          "top": 0,
+          "right": 0,
+          "bottom": 0,
+          "left": 0
+        },
+        "shadow": {
+          "color": "#2092f5ff",
+          "offsetX": 0,
+          "offsetY": 0,
+          "spread": 0,
+          "width": 0
+        },
+        "transform": {
+          "width": 0,
+          "height": 0,
+          "translateX": 0,
+          "translateY": 0,
+          "originX": 0,
+          "originY": 0,
+          "rotate": 0,
+          "scale": 256
+        }
+      },
+      "state": []
+    }
+  ]
+}

src/renderer/src/lvgl-widgets/index.ts

@@ -8,7 +8,6 @@ import Textarea from './textarea'
 import Keyboard from './keyboard'
 import Animimg from './animimg'
 import Dropdown from './dropdown/index'
-import Calendar from './calendar/index'
 import Checkbox from './checkbox'
 import Switch from './switch'
 import Bar from './bar'
@@ -33,6 +32,10 @@ import Canvas from './canvas/index'
 import Spinbox from './spinbox'
 import Roller from './roller'
 
+import Calendar from './calendar/index'
+import DateText from './datetext/index'
+import DagitalClock from './dagital-clock/index'
+
 import Page from './page'
 import { IComponentModelConfig } from './type'
 
@@ -74,7 +77,9 @@ export const ComponentArray = [
 
   Animimg,
 
-  Calendar
+  Calendar,
+  DateText,
+  DagitalClock
 ] as IComponentModelConfig[]
 
 const componentMap: { [key: string]: IComponentModelConfig } = ComponentArray.reduce((acc, cur) => {

src/renderer/src/views/designer/config/property/CusFormItem.vue

@@ -114,6 +114,14 @@
         style="width: 100%"
         v-bind="schema?.componentProps"
       />
+
+      <!-- 时间 -->
+      <CusTimePicker
+        v-if="schema.valueType === 'time'"
+        v-model="value"
+        style="width: 100%"
+        v-bind="schema?.componentProps"
+      />
     </el-form-item>
 
     <!-- 分组 -->
@@ -265,6 +273,7 @@ import { v4 } from 'uuid'
 
 import CusCheckbox from './components/CusCheckbox.vue'
 import CusTextarea from './components/CusTextarea.vue'
+import CusTimePicker from './components/CusTimePicker.vue'
 import ImageSelect from './components/ImageSelect.vue'
 import SymbolSelect from './components/SymbolSelect.vue'
 import { ColorPicker, MonacoEditor } from '@/components'

src/renderer/src/views/designer/config/property/components/CusTimePicker.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-time-picker v-model="getValue" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { dayjs } from 'element-plus'
+
+/**
+ * 默认值为： HH:mm:ss
+ */
+const modelValue = defineModel({
+  type: String,
+  default: ''
+})
+
+const getValue = computed({
+  get() {
+    const time = modelValue.value?.split(':')
+
+    const date = dayjs()
+      .hour(Number(time?.[0] || 0))
+      .minute(Number(time?.[1] || 0))
+      .second(Number(time?.[2] || 0))
+      .format('YYYY-MM-DD HH:mm:ss')
+    return modelValue.value ? date : undefined
+  },
+  set(val) {
+    if (val) {
+      modelValue.value = dayjs(val).format('HH:mm:ss')
+    } else {
+      modelValue.value = ''
+    }
+  }
+})
+</script>
+
+<style scoped></style>

src/renderer/src/views/designer/config/property/components/StyleLine.vue

@@ -19,14 +19,14 @@
     <el-form-item v-if="hasImage" label="图片" label-position="left" label-width="60px">
       <ImageSelect v-model="image" />
     </el-form-item>
-    <el-form-item v-if="hasImage" label="透明度" label-position="left" label-width="60px">
+    <!-- <el-form-item v-if="hasImage" label="透明度" label-position="left" label-width="60px">
       <div class="w-full flex gap-20px items-center">
         <el-slider v-model="alpha" :max="255" :min="0" style="flex: 1"></el-slider>
         <span class="text-text-active inline w-30px cursor-pointer">
           {{ alpha }}
         </span>
       </div>
-    </el-form-item>
+    </el-form-item> -->
 
     <el-form-item v-if="hasDash" label="虚线宽度" label-position="left" label-width="60px">
       <input-number
@@ -67,7 +67,7 @@ const modelValue = defineModel<{
   width: number
   radius?: boolean
   image?: string
-  alpha?: number
+  // alpha?: number
   dashWidth?: number
   dashGap?: number
 }>('modelValue')
@@ -103,16 +103,16 @@ const radius = computed({
 })
 
 // 图像透明度
-const alpha = computed({
-  get() {
-    return modelValue.value?.alpha
-  },
-  set(val: number) {
-    if (modelValue.value) {
-      modelValue.value.alpha = val
-    }
-  }
-})
+// const alpha = computed({
+//   get() {
+//     return modelValue.value?.alpha
+//   },
+//   set(val: number) {
+//     if (modelValue.value) {
+//       modelValue.value.alpha = val
+//     }
+//   }
+// })
 
 const image = computed({
   get() {

src/renderer/src/views/designer/config/property/components/StyleSpace.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row :gutter="12">
-    <el-col v-if="!hideLetterSpacing" :span="hideLineHeight ? 24 : 12">
+    <el-col v-if="!hideLineHeight" :span="hideLetterSpacing ? 24 : 12">
       <el-form-item label="" label-position="left" label-width="0px">
         <input-number
           v-model="lineHeight"
@@ -15,7 +15,7 @@
         </input-number>
       </el-form-item>
     </el-col>
-    <el-col v-if="!hideLineHeight" :span="hideLetterSpacing ? 24 : 12">
+    <el-col v-if="!hideLetterSpacing" :span="hideLineHeight ? 24 : 12">
       <el-form-item label="" label-position="left" label-width="0px">
         <input-number
           v-model="letterSpacing"