From ad37cc514bc1c4d7a829849c6ee3c9aa6d0001b6 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sun, 6 Jul 2025 17:18:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E7=9A=84=E9=94=AE=E7=9B=98?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FTInput/index.vue    | 294 +++++++++++++++++++++++++++
 src/components/common/FTKeyboard/index.vue | 306 -----------------------------
 src/components/formula/FormulaConfig.vue   | 109 +++++-----
 src/main.ts                                |  10 +-
 4 files changed, 344 insertions(+), 375 deletions(-)
 create mode 100644 src/components/common/FTInput/index.vue
 delete mode 100644 src/components/common/FTKeyboard/index.vue

diff --git a/src/components/common/FTInput/index.vue b/src/components/common/FTInput/index.vue
new file mode 100644
index 0000000..d237730
--- /dev/null
+++ b/src/components/common/FTInput/index.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import 'simple-keyboard/build/css/index.css'
+
+import Keyboard from 'simple-keyboard'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
+import { useDeviceStore } from 'stores/deviceStore'
+import { computed, onUnmounted, ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  layoutName: {
+    type: String,
+    default: 'default',
+  },
+  // 保留几位小数 layoutName为number时生效
+  precision: {
+    type: Number,
+    default: 2,
+  },
+})
+const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
+const deviceStore = useDeviceStore()
+const deviceType = computed(() => {
+  return __DEVICE_TYPE__
+})
+
+const model = defineModel()
+const keyboard = ref<any>(null)
+const visible = ref(false)
+const inputRef = ref()
+const popoverRef = ref()
+const entering = ref(false)
+const width = ref(800)
+if (props.layoutName === 'number')
+  width.value = 300
+const displayDefault = ref({
+  '{bksp}': 'backspace',
+  '{lock}': 'caps',
+  '{enter}': '回车',
+  '{tab}': 'tab',
+  '{shift}': 'shift',
+  '{change}': 'en',
+  '{space}': 'space',
+  '{clear}': '清空',
+  '{close}': '关闭',
+  '{arrowleft}': '←',
+  '{arrowright}': '→',
+})
+
+const open = () => {
+  if (visible.value)
+    return
+  inputRef.value.focus()
+  emits('focus')
+  visible.value = true
+}
+
+const focusInput = (e: any) => {
+  const rect = e.target.getBoundingClientRect()
+  if (rect.top + window.scrollY > 800) {
+    placement.value = 'top'
+  }
+  else {
+    placement.value = 'bottom'
+  }
+  if (visible.value)
+    return
+  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
+    visible.value = true
+}
+emits('focus')
+
+// const blurInput = debounce(() => {
+//  if (!entering.value) {
+//    handleClose()
+//  } else {
+//    entering.value = false
+//  }
+// }, 100)
+
+const blurInput = () => {
+  setTimeout(() => {
+    if (!entering.value) {
+      handleClose()
+    }
+    else {
+      entering.value = false
+    }
+  }, 100)
+}
+
+const afterEnter = () => {
+  // 存在上一个实例时移除元素
+  const prevKeyboard = document.querySelectorAll('.init-keyboard')
+  if (prevKeyboard.length > 0)
+    prevKeyboard[0]?.remove()
+  keyboard.value = new Keyboard('simple-keyboard', {
+    onChange,
+    onKeyPress,
+    onInit,
+    layout: {
+      // 默认布局
+      default: [
+        '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+        '{tab} q w e r t y u i o p [ ] \\',
+        '{lock} a s d f g h j k l ; \' {enter}',
+        '{change} z x c v b n m , . / {clear}',
+        '{arrowleft} {arrowright} {space} {close}',
+      ],
+      // 大小写
+      shift: [
+        '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+        '{tab} Q W E R T Y U I O P { } |',
+        '{lock} A S D F G H J K L : " {enter}',
+        '{change} Z X C V B N M < > ? {clear}',
+        '{arrowleft} {arrowright} {space} {close}',
+      ],
+      // 数字布局
+      number: ['7 8 9', '4 5 6', '1 2 3', '. 0 {bksp}', '{arrowleft} {arrowright} {clear} {close}'],
+    },
+    layoutName: props.layoutName,
+    display: displayDefault.value,
+    theme: 'hg-theme-default init-keyboard', // 添加自定义class处理清空逻辑
+  })
+}
+
+const beforeLeave = () => {
+  visible.value = false
+  entering.value = false
+  inputRef.value.blur()
+  displayDefault.value['{change}'] = 'en'
+  document.removeEventListener('click', handlePopClose)
+}
+
+const onInit = (keyboard: any) => {
+  keyboard.setInput(model.value)
+  keyboard.setCaretPosition(inputRef.value?.ref.selectionEnd)
+  document.addEventListener('click', handlePopClose)
+}
+const onChange = (input: any) => {
+  model.value = input
+  emits('onChange', input)
+}
+
+const onKeyPress = (button: any) => {
+  if (button === '{lock}')
+    return handleLock()
+  if (button === '{change}')
+    return handleChange()
+  if (button === '{clear}')
+    return handleClear()
+  if (button === '{enter}')
+    return handleEnter()
+  if (button === '{close}')
+    return handleClose()
+  if (button === '{arrowleft}')
+    return handleArrow(0)
+  if (button === '{arrowright}')
+    return handleArrow(1)
+}
+const handleLock = () => {
+  entering.value = true
+  const currentLayout = keyboard.value.options.layoutName
+  const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+
+  keyboard.value.setOptions({
+    layoutName: shiftToggle,
+  })
+}
+const handleChange = () => {
+  entering.value = true
+  const layoutCandidates = keyboard.value.options.layoutCandidates
+  // 切换中英文输入法
+  if (layoutCandidates !== null && layoutCandidates !== undefined) {
+    displayDefault.value['{change}'] = 'en'
+    keyboard.value.setOptions({
+      layoutName: 'default',
+      layoutCandidates: null,
+      display: displayDefault.value,
+    })
+  }
+  else {
+    displayDefault.value['{change}'] = '中'
+    keyboard.value.setOptions({
+      layoutName: 'default',
+      layoutCandidates: (layout as any).layoutCandidates,
+      display: displayDefault.value,
+    })
+  }
+}
+const handleClear = () => {
+  keyboard.value.clearInput()
+  model.value = ''
+}
+const handleEnter = () => {
+  emits('enter')
+}
+const handleClose = () => {
+  if (props.layoutName === 'number') {
+    // 处理精度
+    // model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${props.precision}}).*$`), '$1.$2').replace(/\.$/, '')
+  }
+  popoverRef.value.hide()
+  emits('close')
+}
+const handleArrow = (num: number) => {
+  // 处理左右箭头下标位置
+  const index = keyboard.value.getCaretPositionEnd()
+  if (num === 0 && index - 1 >= 0) {
+    keyboard.value.setCaretPosition(index - 1)
+  }
+  else if (num === 1 && index + 1 <= (model.value?.length || 0)) {
+    keyboard.value.setCaretPosition(index + 1)
+  }
+}
+
+const handlePopClose = (e: any) => {
+  // 虚拟键盘区域 输入框区域 中文选项区域
+  if (
+    (e.target as Element).closest('.keyboard-popper')
+    || e.target === inputRef.value?.ref
+    || /hg-candidate-box/.test(e.target.className)
+  ) {
+    entering.value = true
+    const index = keyboard.value.getCaretPositionEnd()
+    inputRef.value.ref.selectionStart = inputRef.value.ref.selectionEnd = index
+    inputRef.value.focus()
+  }
+}
+
+const close = () => {
+  handleClose()
+}
+
+const placement = ref('bottom')
+
+onUnmounted(() => {
+  // 某些情况下未触发动画关闭时销毁事件。此处销毁做后备处理
+  document.removeEventListener('click', handlePopClose)
+})
+
+defineExpose({ inputRef, visible, open, close })
+</script>
+
+<template>
+  <el-input
+    ref="inputRef"
+    v-model="model"
+    v-bind="$attrs"
+    @focus="focusInput"
+    @blur="blurInput"
+    @keyup.enter="handleEnter"
+  >
+    <template v-for="(item, index) in $slots" :key="index" #[index]>
+      <slot :name="index" />
+    </template>
+  </el-input>
+
+  <el-popover
+    ref="popoverRef"
+    :visible="visible"
+    :virtual-ref="inputRef"
+    virtual-triggering
+    :width="width"
+    :show-arrow="false"
+    :hide-after="0"
+    :placement="placement"
+    popper-style="padding: 0px;color:#000"
+    :persistent="false"
+    popper-class="keyboard-popper"
+    @after-enter="afterEnter"
+    @before-leave="beforeLeave"
+  >
+    <div class="simple-keyboard" />
+  </el-popover>
+</template>
+
+<style>
+.hg-theme-default .hg-button.hg-button-arrowleft,
+.hg-theme-default .hg-button.hg-button-arrowright {
+  max-width: 70px;
+}
+.hg-theme-default .hg-button.hg-button-close {
+  max-width: 100px;
+}
+.hg-layout-number .hg-button.hg-button-close {
+  max-width: none;
+}
+.hg-layout-number .hg-button.hg-button-bksp {
+  max-width: 92px;
+}
+</style>
diff --git a/src/components/common/FTKeyboard/index.vue b/src/components/common/FTKeyboard/index.vue
deleted file mode 100644
index 8d60f01..0000000
--- a/src/components/common/FTKeyboard/index.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<script setup lang="ts">
-import 'simple-keyboard/build/css/index.css'
-
-import Keyboard from 'simple-keyboard'
-import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
-import { useDeviceStore } from 'stores/deviceStore'
-import { computed, onUnmounted, ref } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-const props = defineProps({
-  layoutName: {
-    type: String,
-    default: 'default',
-  },
-  // 保留几位小数 layoutName为number时生效
-  precision: {
-    type: Number,
-    default: 2,
-  },
-  // 获取焦点打开键盘
-  isOpen: {
-    type: Boolean,
-    default: true,
-  },
-})
-const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
-const deviceStore = useDeviceStore()
-const deviceType = computed(() => {
-  return __DEVICE_TYPE__
-})
-
-const model = defineModel()
-const keyboard = ref<any>(null)
-const visible = ref(false)
-const inputRef = ref()
-const popoverRef = ref()
-const entering = ref(false)
-const width = ref(800)
-if (props.layoutName === 'number')
-  width.value = 300
-const displayDefault = ref({
-  '{bksp}': 'backspace',
-  '{lock}': 'caps',
-  '{enter}': '回车',
-  '{tab}': 'tab',
-  '{shift}': 'shift',
-  '{change}': 'en',
-  '{space}': 'space',
-  '{clear}': '清空',
-  '{close}': '关闭',
-  '{arrowleft}': '←',
-  '{arrowright}': '→',
-})
-
-const open = () => {
-  if (visible.value)
-    return
-  inputRef.value.focus()
-  emits('focus')
-  visible.value = true
-}
-
-const focusInput = (e: any) => {
-  const rect = e.target.getBoundingClientRect()
-  console.log('元素位置信息:', {
-    top: rect.top + window.scrollY,
-    left: rect.left + window.scrollX,
-    width: rect.width,
-    height: rect.height,
-  })
-  if (rect.top + window.scrollY > 800) {
-    placement.value = 'top'
-  }
-  else {
-    placement.value = 'bottom'
-  }
-  console.log(rect)
-  if (visible.value)
-    return
-  emits('focus')
-  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
-    visible.value = true
-}
-
-// const blurInput = debounce(() => {
-//  if (!entering.value) {
-//    handleClose()
-//  } else {
-//    entering.value = false
-//  }
-// }, 100)
-
-const blurInput = () => {
-  setTimeout(() => {
-    if (!entering.value) {
-      handleClose()
-    }
-    else {
-      entering.value = false
-    }
-  }, 100)
-}
-
-const afterEnter = () => {
-  // 存在上一个实例时移除元素
-  const prevKeyboard = document.querySelectorAll('.init-keyboard')
-  if (prevKeyboard.length > 0)
-    prevKeyboard[0]?.remove()
-  keyboard.value = new Keyboard('simple-keyboard', {
-    onChange,
-    onKeyPress,
-    onInit,
-    layout: {
-      // 默认布局
-      default: [
-        '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
-        '{tab} q w e r t y u i o p [ ] \\',
-        '{lock} a s d f g h j k l ; \' {enter}',
-        '{change} z x c v b n m , . / {clear}',
-        '{arrowleft} {arrowright} {space} {close}',
-      ],
-      // 大小写
-      shift: [
-        '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
-        '{tab} Q W E R T Y U I O P { } |',
-        '{lock} A S D F G H J K L : " {enter}',
-        '{change} Z X C V B N M < > ? {clear}',
-        '{arrowleft} {arrowright} {space} {close}',
-      ],
-      // 数字布局
-      number: ['7 8 9', '4 5 6', '1 2 3', '. 0 {bksp}', '{arrowleft} {arrowright} {clear} {close}'],
-    },
-    layoutName: props.layoutName,
-    display: displayDefault.value,
-    theme: 'hg-theme-default init-keyboard', // 添加自定义class处理清空逻辑
-  })
-}
-
-const beforeLeave = () => {
-  visible.value = false
-  entering.value = false
-  inputRef.value.blur()
-  displayDefault.value['{change}'] = 'en'
-  document.removeEventListener('click', handlePopClose)
-}
-
-const onInit = (keyboard: any) => {
-  keyboard.setInput(model.value)
-  keyboard.setCaretPosition(inputRef.value?.ref.selectionEnd)
-  document.addEventListener('click', handlePopClose)
-}
-const onChange = (input: any) => {
-  model.value = input
-  emits('onChange', input)
-}
-
-const onKeyPress = (button: any) => {
-  if (button === '{lock}')
-    return handleLock()
-  if (button === '{change}')
-    return handleChange()
-  if (button === '{clear}')
-    return handleClear()
-  if (button === '{enter}')
-    return handleEnter()
-  if (button === '{close}')
-    return handleClose()
-  if (button === '{arrowleft}')
-    return handleArrow(0)
-  if (button === '{arrowright}')
-    return handleArrow(1)
-}
-const handleLock = () => {
-  entering.value = true
-  const currentLayout = keyboard.value.options.layoutName
-  const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
-
-  keyboard.value.setOptions({
-    layoutName: shiftToggle,
-  })
-}
-const handleChange = () => {
-  entering.value = true
-  const layoutCandidates = keyboard.value.options.layoutCandidates
-  // 切换中英文输入法
-  if (layoutCandidates !== null && layoutCandidates !== undefined) {
-    displayDefault.value['{change}'] = 'en'
-    keyboard.value.setOptions({
-      layoutName: 'default',
-      layoutCandidates: null,
-      display: displayDefault.value,
-    })
-  }
-  else {
-    displayDefault.value['{change}'] = '中'
-    keyboard.value.setOptions({
-      layoutName: 'default',
-      layoutCandidates: (layout as any).layoutCandidates,
-      display: displayDefault.value,
-    })
-  }
-}
-const handleClear = () => {
-  keyboard.value.clearInput()
-  model.value = ''
-}
-const handleEnter = () => {
-  emits('enter')
-}
-const handleClose = () => {
-  if (props.layoutName === 'number') {
-    // 处理精度
-    // model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${props.precision}}).*$`), '$1.$2').replace(/\.$/, '')
-  }
-  popoverRef.value.hide()
-  emits('close')
-}
-const handleArrow = (num: number) => {
-  // 处理左右箭头下标位置
-  const index = keyboard.value.getCaretPositionEnd()
-  if (num === 0 && index - 1 >= 0) {
-    keyboard.value.setCaretPosition(index - 1)
-  }
-  else if (num === 1 && index + 1 <= (model.value?.length || 0)) {
-    keyboard.value.setCaretPosition(index + 1)
-  }
-}
-
-const handlePopClose = (e: any) => {
-  // 虚拟键盘区域 输入框区域 中文选项区域
-  if (
-    (e.target as Element).closest('.keyboard-popper')
-    || e.target === inputRef.value?.ref
-    || /hg-candidate-box/.test(e.target.className)
-  ) {
-    entering.value = true
-    const index = keyboard.value.getCaretPositionEnd()
-    inputRef.value.ref.selectionStart = inputRef.value.ref.selectionEnd = index
-    inputRef.value.focus()
-  }
-}
-
-const close = () => {
-  handleClose()
-}
-
-const placement = ref('bottom')
-
-onUnmounted(() => {
-  // 某些情况下未触发动画关闭时销毁事件。此处销毁做后备处理
-  document.removeEventListener('click', handlePopClose)
-})
-
-defineExpose({ inputRef, visible, open, close })
-</script>
-
-<template>
-  <el-input
-    ref="inputRef"
-    v-model="model"
-    v-bind="$attrs"
-    @focus="focusInput"
-    @blur="blurInput"
-    @keyup.enter="handleEnter"
-  >
-    <template v-for="(item, index) in $slots" :key="index" #[index]>
-      <slot :name="index" />
-    </template>
-  </el-input>
-
-  <el-popover
-    ref="popoverRef"
-    :visible="visible"
-    :virtual-ref="inputRef"
-    virtual-triggering
-    :width="width"
-    :show-arrow="false"
-    :hide-after="0"
-    :placement="placement"
-    popper-style="padding: 0px;color:#000"
-    :persistent="false"
-    popper-class="keyboard-popper"
-    @after-enter="afterEnter"
-    @before-leave="beforeLeave"
-  >
-    <div class="simple-keyboard" />
-  </el-popover>
-</template>
-
-<style>
-.hg-theme-default .hg-button.hg-button-arrowleft,
-.hg-theme-default .hg-button.hg-button-arrowright {
-  max-width: 70px;
-}
-.hg-theme-default .hg-button.hg-button-close {
-  max-width: 100px;
-}
-.hg-layout-number .hg-button.hg-button-close {
-  max-width: none;
-}
-.hg-layout-number .hg-button.hg-button-bksp {
-  max-width: 92px;
-}
-</style>
diff --git a/src/components/formula/FormulaConfig.vue b/src/components/formula/FormulaConfig.vue
index aba56eb..1911cb3 100644
--- a/src/components/formula/FormulaConfig.vue
+++ b/src/components/formula/FormulaConfig.vue
@@ -105,43 +105,46 @@ watch(
   },
   { deep: true },
 )
-const formRef = ref(null)
+const formRef = ref()
 
 /**
  * 处理表单提交
  * 根据不同的type属性值执行不同的保存逻辑
  */
-const handleSubmit = () => {
+const handleSubmit = async () => {
   // 表单验证
-  if (formData.value.name === '') {
-    FtMessage.warning('请输入配方名称')
-    return
-  }
-  if (formData.value.name && formData.value.name.length > 20) {
-    FtMessage.warning('配方名称1-20字符')
-    return
-  }
-  if (formData.value.formula_id) { // 修改配方
-    // 判断消毒是否正在执行 且正在执行配方是当前修改配方
-    if (!deviceState.value && formulaStore.selectedFormulaInfo?.formula_id === formData.value.formula_id) {
-      ElMessage.warning('禁止修改正在执行的配方信息!')
+  try {
+    const valid = await formRef.value.validate()
+    if (!valid) {
       return
     }
-    const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
-    formulaStore.editFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
-  }
-  else { // 新增配方
-    formulaStore.onAddFormula().then((res) => {
-      if (res.ackcode === 0) {
-        const item = res.rely
-        const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
-        formulaForm.formula_id = item.formula_id
-        formulaStore.editFormula(item.formula_id, formulaForm as Formula.FormulaItem).then(() => {
-          FtMessage.success('操作成功')
-          formulaStore.initFormulaList()
-        })
+    if (formData.value.formula_id) {
+      // 修改配方
+      // 判断消毒是否正在执行 且正在执行配方是当前修改配方
+      if (!deviceState.value && formulaStore.selectedFormulaInfo?.formula_id === formData.value.formula_id) {
+        ElMessage.warning('禁止修改正在执行的配方信息!')
+        return
       }
-    })
+      const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
+      formulaStore.editFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
+    }
+    else {
+      // 新增配方
+      formulaStore.onAddFormula().then((res) => {
+        if (res.ackcode === 0) {
+          const item = res.rely
+          const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
+          formulaForm.formula_id = item.formula_id
+          formulaStore.editFormula(item.formula_id, formulaForm as Formula.FormulaItem).then(() => {
+            FtMessage.success('操作成功')
+            formulaStore.initFormulaList()
+          })
+        }
+      })
+    }
+  }
+  catch (e) {
+    console.log(e)
   }
 }
 /**
@@ -192,16 +195,12 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 <template>
   <transition name="slide-right">
     <div v-if="isFlip" class="formula-form">
-      <el-form
-        ref="formRef"
-        :model="formData"
-        label-width="auto"
-        label-position="right"
-        :size="size"
-        inline
-      >
+      <el-form ref="formRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
         <el-form-item
-          label="配方名称" style="width: 93%" prop="name" :rules="[
+          label="配方名称"
+          style="width: 93%"
+          prop="name"
+          :rules="[
             {
               required: true,
               message: '请输入配方名称',
@@ -215,15 +214,10 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
             },
           ]"
         >
-          <el-input
-            v-model="formData.name"
-            v-prevent-keyboard
-            name="name"
-            placeholder="配方名称"
-          />
+          <ft-input v-model="formData.name" name="name" placeholder="配方名称" />
         </el-form-item>
         <el-form-item
-          v-for="item in formulaConfigList.filter((data) => data.is_visible_in_formula_page)"
+          v-for="item in formulaConfigList.filter(data => data.is_visible_in_formula_page)"
           :key="item.setting_id"
           :label="formulaNameMap[item.setting_id]"
           style="width: 50%"
@@ -237,38 +231,24 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
           ]"
         >
           <template v-if="item.val_type === 'int'">
-            <el-input
-              v-model.number="formData[item.setting_id]"
-              v-prevent-keyboard
-              style="width: 80%"
-              type="number"
-              :name="item.setting_id"
-              :controls="false"
-            >
+            <ft-input v-model="formData[item.setting_id]" style="width: 80%" layout-name="number">
               <template v-if="labelUnitMap[item.setting_id]" #append>
                 {{ labelUnitMap[item.setting_id] }}
               </template>
-            </el-input>
+            </ft-input>
           </template>
           <template v-if="item.val_type === 'float'">
-            <el-input
-              v-model.number="formData[item.setting_id]"
-              v-prevent-keyboard
-              style="width: 80%"
-              type="number"
-              :name="item.setting_id"
-              :controls="false"
-            >
+            <ft-input v-model.number="formData[item.setting_id]" layout-name="number" style="width: 80%" type="number">
               <template v-if="labelUnitMap[item.setting_id]" #append>
                 {{ labelUnitMap[item.setting_id] }}
               </template>
-            </el-input>
+            </ft-input>
           </template>
           <template v-else-if="item.val_type === 'enum'">
             <el-select
               v-model="formData[item.setting_id]"
               v-prevent-keyboard
-              style="width: 80%;height:40px"
+              style="width: 80%; height: 40px"
               placeholder="请选择"
               readonly
             >
@@ -339,6 +319,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   text-align: left;
   height: 40px;
 }
+:deep(.el-select__wrapper) {
+  height: 40px;
+}
 :deep(.el-form-item) {
   margin-right: 0;
   align-items: center;
diff --git a/src/main.ts b/src/main.ts
index 4cfca2c..967e56b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import BTButton from 'components/common/BTButton/index.vue'
 import FtButton from 'components/common/FTButton/index.vue'
 import FtDialog from 'components/common/FTDialog/index.vue'
+import FtInput from 'components/common/FTInput/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
 import ElementPlus from 'element-plus'
 import locale from 'element-plus/es/locale/lang/zh-cn'
@@ -27,7 +28,7 @@ const i18n = createI18n<{
   }
 }>({
   legacy: false,
-  locale: localStorage.getItem('locale') as LocaleType || defaultLocale,
+  locale: (localStorage.getItem('locale') as LocaleType) || defaultLocale,
   fallbackLocale: 'en',
   messages,
 })
@@ -50,8 +51,5 @@ app.component('BtButton', BTButton)
 app.component('FtTable', FtTable)
 app.component('FtButton', FtButton)
 app.component('FtDialog', FtDialog)
-app
-  .use(router)
-  .use(i18n)
-  .use(ElementPlus, { locale, zIndex: 3000 })
-  .mount('#app')
+app.component('FtInput', FtInput)
+app.use(router).use(i18n).use(ElementPlus, { locale, zIndex: 3000 }).mount('#app')