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

This commit is contained in:
puhui999
2025-08-07 18:12:55 +08:00
parent f3d1989832
commit 85ba03b0ea
2 changed files with 221 additions and 124 deletions

View File

@ -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)

View File

@ -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