perf(components): 优化“网关参数扩展”组件

1. 根据输入内容的长度动态调整输入框的宽度

src/views/setup-protocol/GatewayParamExt.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+
+import { addUnit } from '@/utils';
+
+import type { CSSProperties } from 'vue';
 
 interface Props {
   extInfo: {
@@ -14,6 +18,8 @@ interface Props {
   };
 }
 
+type NumValue = string | number | undefined;
+
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
@@ -26,8 +32,30 @@ const emit = defineEmits<{
   ];
 }>();
 
-const deviceNum = ref<string | number | undefined>(props.extInfo.deviceNum);
-const moduleNum = ref<string | number | undefined>(props.extInfo.moduleNum);
+const deviceNum = ref<NumValue>(props.extInfo.deviceNum);
+const moduleNum = ref<NumValue>(props.extInfo.moduleNum);
+
+const deviceNumInputStyle = computed<CSSProperties>(() => {
+  return {
+    width: addUnit(getInputWidth(deviceNum.value)),
+  };
+});
+
+const moduleNumInputStyle = computed<CSSProperties>(() => {
+  return {
+    width: addUnit(getInputWidth(moduleNum.value)),
+  };
+});
+
+const getInputWidth = (num: NumValue): number => {
+  if (!num || String(num).length < 2) {
+    return 32;
+  } else if (String(num).length < 3) {
+    return 40;
+  }
+
+  return 50;
+};
 
 const handleChange = () => {
   const { deviceName, deviceParam, moduleName, moduleParam, statusName, statusParam } = props.extInfo;
@@ -67,6 +95,7 @@ const handleChange = () => {
       {{ extInfo.deviceName }}
       <AInputNumber
         class="gateway-param-ext-input"
+        :style="deviceNumInputStyle"
         v-model:value="deviceNum"
         :min="0"
         :precision="0"
@@ -78,6 +107,7 @@ const handleChange = () => {
       {{ extInfo.moduleName }}
       <AInputNumber
         class="gateway-param-ext-input"
+        :style="moduleNumInputStyle"
         v-model:value="moduleNum"
         :min="0"
         :precision="0"