perf: 【IoT 物联网】场景联动 JsonParamsInput 组件优化

src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue

@@ -24,7 +24,13 @@
             popper-class="json-params-detail-popover"
           >
             <template #reference>
-              <el-button type="info" :icon="InfoFilled" circle size="small" title="查看参数示例" />
+              <el-button
+                type="info"
+                :icon="InfoFilled"
+                circle
+                size="small"
+                :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
+              />
             </template>
 
             <!-- 弹出层内容 -->
@@ -55,7 +61,7 @@
                         <div class="text-12px font-500 text-[var(--el-text-color-primary)]">
                           {{ param.name }}
                           <el-tag v-if="param.required" size="small" type="danger" class="ml-4px">
-                            必填
+                            {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
                           </el-tag>
                         </div>
                         <div class="text-11px text-[var(--el-text-color-secondary)]">
@@ -75,7 +81,7 @@
 
                   <div class="mt-12px ml-22px">
                     <div class="text-12px text-[var(--el-text-color-secondary)] mb-6px">
-                      完整 JSON 格式：
+                      {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
                     </div>
                     <pre
                       class="p-12px bg-[var(--el-fill-color-light)] rounded-4px text-11px text-[var(--el-text-color-primary)] overflow-x-auto border-l-3px border-[var(--el-color-primary)]"
@@ -103,7 +109,11 @@
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-8px">
           <Icon
-            :icon="jsonError ? 'ep:warning' : 'ep:circle-check'"
+            :icon="
+              jsonError
+                ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
+                : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
+            "
             :class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
             class="text-14px"
           />
@@ -111,17 +121,21 @@
             :class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
             class="text-12px"
           >
-            {{ jsonError || 'JSON 格式正确' }}
+            {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
           </span>
         </div>
 
         <!-- 快速填充按钮 -->
         <div v-if="paramsList.length > 0" class="flex items-center gap-8px">
-          <span class="text-12px text-[var(--el-text-color-secondary)]">快速填充：</span>
+          <span class="text-12px text-[var(--el-text-color-secondary)]">{{
+            JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
+          }}</span>
           <el-button size="small" type="primary" plain @click="fillExampleJson">
-            示例数据
+            {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
           </el-button>
-          <el-button size="small" type="danger" plain @click="clearParams"> 清空</el-button>
+          <el-button size="small" type="danger" plain @click="clearParams">{{
+            JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON
+          }}</el-button>
         </div>
       </div>
     </div>
@@ -136,7 +150,14 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { InfoFilled } from '@element-plus/icons-vue'
-import { IoTDataSpecsDataTypeEnum } from '@/views/iot/utils/constants'
+import {
+  IoTDataSpecsDataTypeEnum,
+  JSON_PARAMS_INPUT_CONSTANTS,
+  JSON_PARAMS_INPUT_ICONS,
+  JSON_PARAMS_EXAMPLE_VALUES,
+  JsonParamsInputTypeEnum,
+  type JsonParamsInputType
+} from '@/views/iot/utils/constants'
 
 /** JSON参数输入组件 - 通用版本 */
 defineOptions({ name: 'JsonParamsInput' })
@@ -164,7 +185,7 @@ export interface JsonParamsConfig {
 interface Props {
   modelValue?: string
   config?: JsonParamsConfig
-  type?: 'service' | 'event' | 'property' | 'custom'
+  type?: JsonParamsInputType
   placeholder?: string
 }
 
@@ -173,8 +194,8 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'service',
-  placeholder: '请输入JSON格式的参数'
+  type: JsonParamsInputTypeEnum.SERVICE,
+  placeholder: JSON_PARAMS_INPUT_CONSTANTS.PLACEHOLDER
 })
 
 const emit = defineEmits<Emits>()
@@ -202,13 +223,13 @@ const hasConfig = computed(() => {
 
 const paramsList = computed(() => {
   switch (props.type) {
-    case 'service':
+    case JsonParamsInputTypeEnum.SERVICE:
       return props.config?.service?.inputParams || []
-    case 'event':
+    case JsonParamsInputTypeEnum.EVENT:
       return props.config?.event?.outputParams || []
-    case 'property':
+    case JsonParamsInputTypeEnum.PROPERTY:
       return props.config?.properties || []
-    case 'custom':
+    case JsonParamsInputTypeEnum.CUSTOM:
       return props.config?.custom?.params || []
     default:
       return []
@@ -217,91 +238,91 @@ const paramsList = computed(() => {
 
 const title = computed(() => {
   switch (props.type) {
-    case 'service':
-      return `${props.config?.service?.name || '服务'} - 输入参数示例`
-    case 'event':
-      return `${props.config?.event?.name || '事件'} - 输出参数示例`
-    case 'property':
-      return '属性设置 - 参数示例'
-    case 'custom':
-      return `${props.config?.custom?.name || '自定义'} - 参数示例`
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.SERVICE(props.config?.service?.name)
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.EVENT(props.config?.event?.name)
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.CUSTOM(props.config?.custom?.name)
     default:
-      return '参数示例'
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.DEFAULT
   }
 })
 
 const titleIcon = computed(() => {
   switch (props.type) {
-    case 'service':
-      return 'ep:service'
-    case 'event':
-      return 'ep:bell'
-    case 'property':
-      return 'ep:edit'
-    case 'custom':
-      return 'ep:document'
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.CUSTOM
     default:
-      return 'ep:document'
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.DEFAULT
   }
 })
 
 const paramsIcon = computed(() => {
   switch (props.type) {
-    case 'service':
-      return 'ep:edit'
-    case 'event':
-      return 'ep:upload'
-    case 'property':
-      return 'ep:setting'
-    case 'custom':
-      return 'ep:list'
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.CUSTOM
     default:
-      return 'ep:edit'
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.DEFAULT
   }
 })
 
 const paramsLabel = computed(() => {
   switch (props.type) {
-    case 'service':
-      return '输入参数'
-    case 'event':
-      return '输出参数'
-    case 'property':
-      return '属性参数'
-    case 'custom':
-      return '参数列表'
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.CUSTOM
     default:
-      return '参数'
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.DEFAULT
   }
 })
 
 const emptyMessage = computed(() => {
   switch (props.type) {
-    case 'service':
-      return '此服务无需输入参数'
-    case 'event':
-      return '此事件无输出参数'
-    case 'property':
-      return '无可设置的属性'
-    case 'custom':
-      return '无参数配置'
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.CUSTOM
     default:
-      return '无参数'
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.DEFAULT
   }
 })
 
 const noConfigMessage = computed(() => {
   switch (props.type) {
-    case 'service':
-      return '请先选择服务'
-    case 'event':
-      return '请先选择事件'
-    case 'property':
-      return '请先选择产品'
-    case 'custom':
-      return '请先进行配置'
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM
     default:
-      return '请先进行配置'
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT
   }
 })
 
@@ -316,14 +337,14 @@ const handleParamsChange = () => {
 
       // 额外的参数验证
       if (typeof parsed !== 'object' || parsed === null) {
-        jsonError.value = '参数必须是一个有效的 JSON 对象'
+        jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT
         return
       }
 
       // 验证必填参数
       for (const param of paramsList.value) {
         if (param.required && (!parsed[param.identifier] || parsed[param.identifier] === '')) {
-          jsonError.value = `参数 ${param.name} 为必填项`
+          jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(param.name)
           return
         }
       }
@@ -334,7 +355,9 @@ const handleParamsChange = () => {
     // 验证通过
     jsonError.value = ''
   } catch (error) {
-    jsonError.value = `JSON格式错误: ${error instanceof Error ? error.message : '未知错误'}`
+    jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
+      error instanceof Error ? error.message : JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR
+    )
   }
 }
 
@@ -353,16 +376,17 @@ const clearParams = () => {
 
 // 工具函数
 const getParamTypeName = (dataType: string) => {
+  // 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
   const typeMap = {
-    int: '整数',
-    float: '浮点数',
-    double: '双精度',
-    text: '字符串',
-    bool: '布尔值',
-    enum: '枚举',
-    date: '日期',
-    struct: '结构体',
-    array: '数组'
+    [IoTDataSpecsDataTypeEnum.INT]: '整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
+    [IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
+    [IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
+    [IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
+    [IoTDataSpecsDataTypeEnum.DATE]: '日期',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '数组'
   }
   return typeMap[dataType] || dataType
 }
@@ -383,25 +407,9 @@ const getParamTypeTag = (dataType: string) => {
 }
 
 const getExampleValue = (param: any) => {
-  switch (param.dataType) {
-    case IoTDataSpecsDataTypeEnum.INT:
-      return '25'
-    case IoTDataSpecsDataTypeEnum.FLOAT:
-    case IoTDataSpecsDataTypeEnum.DOUBLE:
-      return '25.5'
-    case IoTDataSpecsDataTypeEnum.BOOL:
-      return 'false'
-    case IoTDataSpecsDataTypeEnum.TEXT:
-      return '"auto"'
-    case IoTDataSpecsDataTypeEnum.ENUM:
-      return '"option1"'
-    case IoTDataSpecsDataTypeEnum.STRUCT:
-      return '{}'
-    case IoTDataSpecsDataTypeEnum.ARRAY:
-      return '[]'
-    default:
-      return '""'
-  }
+  const exampleConfig =
+    JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
+  return exampleConfig.display
 }
 
 const generateExampleJson = () => {
@@ -411,29 +419,9 @@ const generateExampleJson = () => {
 
   const example = {}
   paramsList.value.forEach((param) => {
-    switch (param.dataType) {
-      case 'int':
-        example[param.identifier] = 25
-        break
-      case 'float':
-      case 'double':
-        example[param.identifier] = 25.5
-        break
-      case 'bool':
-        example[param.identifier] = false
-        break
-      case 'text':
-        example[param.identifier] = 'auto'
-        break
-      case 'struct':
-        example[param.identifier] = {}
-        break
-      case 'array':
-        example[param.identifier] = []
-        break
-      default:
-        example[param.identifier] = ''
-    }
+    const exampleConfig =
+      JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
+    example[param.identifier] = exampleConfig.value
   })
 
   return JSON.stringify(example, null, 2)

src/views/iot/utils/constants.ts

@@ -559,3 +559,112 @@ export const getTriggerTagType = (
   }
   return isDeviceTrigger(type) ? 'success' : 'info'
 }
+
+// ========== JSON参数输入组件相关常量 ==========
+
+/** JSON参数输入组件类型枚举 */
+export const JsonParamsInputTypeEnum = {
+  SERVICE: 'service',
+  EVENT: 'event',
+  PROPERTY: 'property',
+  CUSTOM: 'custom'
+} as const
+
+/** JSON参数输入组件类型 */
+export type JsonParamsInputType =
+  (typeof JsonParamsInputTypeEnum)[keyof typeof JsonParamsInputTypeEnum]
+
+/** JSON参数输入组件文本常量 */
+export const JSON_PARAMS_INPUT_CONSTANTS = {
+  // 基础文本
+  PLACEHOLDER: '请输入JSON格式的参数',
+  JSON_FORMAT_CORRECT: 'JSON 格式正确',
+  QUICK_FILL_LABEL: '快速填充：',
+  EXAMPLE_DATA_BUTTON: '示例数据',
+  CLEAR_BUTTON: '清空',
+  VIEW_EXAMPLE_TITLE: '查看参数示例',
+  COMPLETE_JSON_FORMAT: '完整 JSON 格式：',
+  REQUIRED_TAG: '必填',
+
+  // 错误信息
+  PARAMS_MUST_BE_OBJECT: '参数必须是一个有效的 JSON 对象',
+  PARAM_REQUIRED_ERROR: (paramName: string) => `参数 ${paramName} 为必填项`,
+  JSON_FORMAT_ERROR: (error: string) => `JSON格式错误: ${error}`,
+  UNKNOWN_ERROR: '未知错误',
+
+  // 类型相关标题
+  TITLES: {
+    SERVICE: (name?: string) => `${name || '服务'} - 输入参数示例`,
+    EVENT: (name?: string) => `${name || '事件'} - 输出参数示例`,
+    PROPERTY: '属性设置 - 参数示例',
+    CUSTOM: (name?: string) => `${name || '自定义'} - 参数示例`,
+    DEFAULT: '参数示例'
+  },
+
+  // 参数标签
+  PARAMS_LABELS: {
+    SERVICE: '输入参数',
+    EVENT: '输出参数',
+    PROPERTY: '属性参数',
+    CUSTOM: '参数列表',
+    DEFAULT: '参数'
+  },
+
+  // 空状态消息
+  EMPTY_MESSAGES: {
+    SERVICE: '此服务无需输入参数',
+    EVENT: '此事件无输出参数',
+    PROPERTY: '无可设置的属性',
+    CUSTOM: '无参数配置',
+    DEFAULT: '无参数'
+  },
+
+  // 无配置消息
+  NO_CONFIG_MESSAGES: {
+    SERVICE: '请先选择服务',
+    EVENT: '请先选择事件',
+    PROPERTY: '请先选择产品',
+    CUSTOM: '请先进行配置',
+    DEFAULT: '请先进行配置'
+  }
+} as const
+
+/** JSON参数输入组件图标常量 */
+export const JSON_PARAMS_INPUT_ICONS = {
+  // 标题图标
+  TITLE_ICONS: {
+    SERVICE: 'ep:service',
+    EVENT: 'ep:bell',
+    PROPERTY: 'ep:edit',
+    CUSTOM: 'ep:document',
+    DEFAULT: 'ep:document'
+  },
+
+  // 参数图标
+  PARAMS_ICONS: {
+    SERVICE: 'ep:edit',
+    EVENT: 'ep:upload',
+    PROPERTY: 'ep:setting',
+    CUSTOM: 'ep:list',
+    DEFAULT: 'ep:edit'
+  },
+
+  // 状态图标
+  STATUS_ICONS: {
+    ERROR: 'ep:warning',
+    SUCCESS: 'ep:circle-check'
+  }
+} as const
+
+/** JSON参数输入组件示例值常量 */
+export const JSON_PARAMS_EXAMPLE_VALUES = {
+  [IoTDataSpecsDataTypeEnum.INT]: { display: '25', value: 25 },
+  [IoTDataSpecsDataTypeEnum.FLOAT]: { display: '25.5', value: 25.5 },
+  [IoTDataSpecsDataTypeEnum.DOUBLE]: { display: '25.5', value: 25.5 },
+  [IoTDataSpecsDataTypeEnum.BOOL]: { display: 'false', value: false },
+  [IoTDataSpecsDataTypeEnum.TEXT]: { display: '"auto"', value: 'auto' },
+  [IoTDataSpecsDataTypeEnum.ENUM]: { display: '"option1"', value: 'option1' },
+  [IoTDataSpecsDataTypeEnum.STRUCT]: { display: '{}', value: {} },
+  [IoTDataSpecsDataTypeEnum.ARRAY]: { display: '[]', value: [] },
+  DEFAULT: { display: '""', value: '' }
+} as const