优化配置项输入组件,新增下拉选择功能,支持JSON格式输入,提升用户交互体验
This commit is contained in:
@@ -44,22 +44,39 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="value-input">
|
<div class="value-input">
|
||||||
<el-input
|
<template v-if="config.configType === 'JSON'">
|
||||||
v-if="config.configType !== 'JSON'"
|
<el-input
|
||||||
v-model="localValues[config.configKey]"
|
v-model="localValues[config.configKey]"
|
||||||
:type="config.configType === 'INTEGER' ? 'number' : 'text'"
|
type="textarea"
|
||||||
@blur="handleValueChange(config)"
|
:rows="3"
|
||||||
@keyup.enter="handleValueChange(config)"
|
@blur="handleValueChange(config)"
|
||||||
:placeholder="getValuePlaceholder(config.configType)"
|
placeholder="请输入有效的JSON格式"
|
||||||
/>
|
/>
|
||||||
<el-input
|
</template>
|
||||||
v-else
|
<template v-else-if="config.configType === 'SELECT'">
|
||||||
v-model="localValues[config.configKey]"
|
<el-select
|
||||||
type="textarea"
|
v-model="localValues[config.configKey]"
|
||||||
:rows="3"
|
placeholder="请选择"
|
||||||
@blur="handleValueChange(config)"
|
@change="() => handleValueChange(config)"
|
||||||
placeholder="请输入有效的JSON格式"
|
clearable
|
||||||
/>
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="opt in getSelectOptions(config)"
|
||||||
|
:key="opt.value"
|
||||||
|
:label="opt.label"
|
||||||
|
:value="opt.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-input
|
||||||
|
v-model="localValues[config.configKey]"
|
||||||
|
:type="config.configType === 'INTEGER' ? 'number' : 'text'"
|
||||||
|
@blur="handleValueChange(config)"
|
||||||
|
@keyup.enter="handleValueChange(config)"
|
||||||
|
:placeholder="getValuePlaceholder(config.configType)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="hasChanged(config)" class="value-status">
|
<div v-if="hasChanged(config)" class="value-status">
|
||||||
@@ -124,7 +141,8 @@ function getTypeLabel(type) {
|
|||||||
STRING: '字符串',
|
STRING: '字符串',
|
||||||
INTEGER: '整数',
|
INTEGER: '整数',
|
||||||
BOOLEAN: '布尔值',
|
BOOLEAN: '布尔值',
|
||||||
JSON: 'JSON'
|
JSON: 'JSON',
|
||||||
|
SELECT: '下拉选择'
|
||||||
}
|
}
|
||||||
return typeMap[type] || type
|
return typeMap[type] || type
|
||||||
}
|
}
|
||||||
@@ -135,6 +153,8 @@ function getValuePlaceholder(type) {
|
|||||||
return '请输入整数'
|
return '请输入整数'
|
||||||
case 'BOOLEAN':
|
case 'BOOLEAN':
|
||||||
return '请输入 true 或 false'
|
return '请输入 true 或 false'
|
||||||
|
case 'SELECT':
|
||||||
|
return '请选择'
|
||||||
case 'STRING':
|
case 'STRING':
|
||||||
return '请输入字符串值'
|
return '请输入字符串值'
|
||||||
default:
|
default:
|
||||||
@@ -142,6 +162,33 @@ function getValuePlaceholder(type) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 返回对应配置项的下拉选项
|
||||||
|
function getSelectOptions(config) {
|
||||||
|
// 特殊处理 user.progress_display_format
|
||||||
|
if (config.configKey === 'user.progress_display_format') {
|
||||||
|
return [
|
||||||
|
{ label: '50/100', value: '1' },
|
||||||
|
{ label: '差:50', value: '2' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果后端提供了 options 字段(JSON 字符串或数组),做兼容
|
||||||
|
if (config.options) {
|
||||||
|
try {
|
||||||
|
const parsed = typeof config.options === 'string' ? JSON.parse(config.options) : config.options
|
||||||
|
// 期望形如 [{ label, value }] 或 { value: label }
|
||||||
|
if (Array.isArray(parsed)) return parsed
|
||||||
|
if (parsed && typeof parsed === 'object') {
|
||||||
|
return Object.entries(parsed).map(([value, label]) => ({ label, value }))
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// ignore parse error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
function hasChanged(config) {
|
function hasChanged(config) {
|
||||||
return localValues[config.configKey] !== originalValues[config.configKey]
|
return localValues[config.configKey] !== originalValues[config.configKey]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user