提交 b0f0d211 authored 作者: 陈泽健's avatar 陈泽健

feat(device-sim): 优化环境配置新增弹窗用户体验

- MQTT 账号密码设置默认值(mqtt@cmdb / mqtt@webpassw0RD)
- 主题配置移至高级选项折叠面板,简化表单布局
- 优化表单字段顺序,突出核心配置项
- 新增折叠面板样式,提升用户体验
Co-Authored-By: 's avatarClaude <noreply@anthropic.com>
上级 f7f85ad9
...@@ -73,8 +73,8 @@ ...@@ -73,8 +73,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="主题基础前缀" prop="topicPrefix"> <el-form-item label="客户端 ID 前缀">
<el-input v-model="form.topicPrefix" placeholder="如:device" @input="onBasePrefixChange" /> <el-input v-model="form.clientIdPrefix" placeholder="如:sim" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -93,18 +93,22 @@ ...@@ -93,18 +93,22 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用户名"> <el-form-item label="用户名">
<el-input v-model="form.username" placeholder="MQTT 用户名" /> <el-input v-model="form.username" placeholder="MQTT 用户名(默认已填)" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="密码"> <el-form-item label="密码">
<el-input v-model="form.password" type="password" show-password placeholder="MQTT 密码" /> <el-input v-model="form.password" type="password" show-password placeholder="MQTT 密码(默认已填)" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 多主题配置 --> <!-- 高级选项:主题配置(折叠显示) -->
<el-divider content-position="left">主题配置(按设备类型)</el-divider> <el-collapse v-model="advancedCollapse" class="advanced-collapse">
<el-collapse-item title="高级选项(主题配置)" name="topics">
<el-form-item label="主题基础前缀" prop="topicPrefix">
<el-input v-model="form.topicPrefix" placeholder="如:device" @input="onBasePrefixChange" />
</el-form-item>
<div class="topics-editor"> <div class="topics-editor">
<div class="topic-item" v-for="dt in deviceTypes" :key="dt"> <div class="topic-item" v-for="dt in deviceTypes" :key="dt">
<span class="topic-label">{{ deviceTypeLabel(dt) }}</span> <span class="topic-label">{{ deviceTypeLabel(dt) }}</span>
...@@ -121,19 +125,15 @@ ...@@ -121,19 +125,15 @@
修改基础前缀可批量重置各设备主题;也可单独自定义每个设备类型的主题路径 修改基础前缀可批量重置各设备主题;也可单独自定义每个设备类型的主题路径
</el-tag> </el-tag>
</div> </div>
<el-row :gutter="20" style="margin-top: 12px"> <el-row :gutter="20" style="margin-top: 12px">
<el-col :span="12">
<el-form-item label="客户端 ID 前缀">
<el-input v-model="form.clientIdPrefix" placeholder="如:sim" />
</el-form-item>
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="TLS 加密"> <el-form-item label="TLS 加密">
<el-switch v-model="form.useTls" /> <el-switch v-model="form.useTls" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-collapse-item>
</el-collapse>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
...@@ -177,6 +177,7 @@ const isEdit = ref(false) ...@@ -177,6 +177,7 @@ const isEdit = ref(false)
const saving = ref(false) const saving = ref(false)
const editId = ref('') const editId = ref('')
const formRef = ref() const formRef = ref()
const advancedCollapse = ref<string[]>([]) // 高级选项折叠面板状态(默认收起)
/** 根据基础前缀生成默认多主题映射 */ /** 根据基础前缀生成默认多主题映射 */
function buildDefaultTopics(prefix?: string | null): Record<string, string> { function buildDefaultTopics(prefix?: string | null): Record<string, string> {
...@@ -192,8 +193,8 @@ const defaultForm = (): EnvConfigCreate => ({ ...@@ -192,8 +193,8 @@ const defaultForm = (): EnvConfigCreate => ({
name: '', name: '',
brokerHost: '', brokerHost: '',
brokerPort: 1883, brokerPort: 1883,
username: '', username: 'mqtt@cmdb',
password: '', password: 'mqtt@webpassw0RD',
topicPrefix: 'device', topicPrefix: 'device',
topics: buildDefaultTopics('device'), topics: buildDefaultTopics('device'),
useTls: false, useTls: false,
...@@ -383,6 +384,28 @@ onMounted(() => { ...@@ -383,6 +384,28 @@ onMounted(() => {
font-size: 13px; font-size: 13px;
} }
.advanced-collapse {
margin-top: 16px;
border: none;
}
.advanced-collapse :deep(.el-collapse-item__header) {
background: #f5f7fa;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 0 16px;
font-size: 14px;
color: #606266;
}
.advanced-collapse :deep(.el-collapse-item__wrap) {
border: none;
}
.advanced-collapse :deep(.el-collapse-item__content) {
padding-top: 16px;
}
.topics-editor { .topics-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -391,6 +414,7 @@ onMounted(() => { ...@@ -391,6 +414,7 @@ onMounted(() => {
background: #fafafa; background: #fafafa;
border-radius: 6px; border-radius: 6px;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
margin-top: 8px;
} }
.topic-item { .topic-item {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论