feat(群级配置): 优化群显示、模板入口和JSON编辑体验
- 列表中群信息改为群名主展示,ID弱化展示 - 模板入口改为按插件动态显示:仅选择群成员变更监控时显示欢迎模板按钮 - 移除顶部通用快捷模板,减少误导 - JSON编辑区升级为多行自适应编辑器,增加等宽字体与格式化按钮
This commit is contained in:
@@ -31,10 +31,17 @@
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<el-card shadow="hover">
|
||||
<el-table :data="rows" style="width:100%" v-loading="loading">
|
||||
<el-table-column prop="id" label="ID" width="70"></el-table-column>
|
||||
<el-table-column prop="group_id" label="群ID" min-width="190"></el-table-column>
|
||||
<el-table-column label="群" min-width="220">
|
||||
<template slot-scope="scope">
|
||||
<div class="group-cell">
|
||||
<div class="group-name">{% raw %}{{ getGroupName(scope.row.group_id) }}{% endraw %}</div>
|
||||
<div class="group-id">{% raw %}{{ scope.row.group_id }}{% endraw %}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="plugin_name" label="插件" min-width="140"></el-table-column>
|
||||
<el-table-column prop="config_key" label="配置键" width="120"></el-table-column>
|
||||
<el-table-column label="启用" width="90">
|
||||
@@ -61,17 +68,14 @@
|
||||
|
||||
<el-dialog :title="editing ? '编辑配置' : '新增配置'" :visible.sync="dialogVisible" width="720px">
|
||||
<el-form label-width="95px">
|
||||
<el-form-item label="快捷模板">
|
||||
<div class="quick-actions">
|
||||
<el-button size="mini" type="primary" plain @click="useWelcomeTemplate">
|
||||
进群欢迎表单模板
|
||||
</el-button>
|
||||
<span class="quick-tip">点击后自动切换到“群成员变更监控 / welcome”标准表单</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="群ID">
|
||||
<el-select v-model="form.group_id" filterable placeholder="请选择群" style="width:100%">
|
||||
<el-option v-for="item in groupOptions" :key="item.wxid" :label="item.name" :value="item.wxid"></el-option>
|
||||
<el-option v-for="item in groupOptions" :key="item.wxid" :label="item.name" :value="item.wxid">
|
||||
<div class="group-option">
|
||||
<div class="group-option-name">{% raw %}{{ item.name }}{% endraw %}</div>
|
||||
<div class="group-option-id">{% raw %}{{ item.wxid }}{% endraw %}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="插件">
|
||||
@@ -91,11 +95,16 @@
|
||||
<el-radio-button label="advanced">高级JSON</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-alert
|
||||
v-if="!isWelcomeTemplateForm"
|
||||
type="info"
|
||||
:closable="false"
|
||||
title="当前不是结构化模板配置。将插件设为“群成员变更监控”且配置键为“welcome”即可显示标准表单。">
|
||||
<el-form-item label="插件模板" v-if="isMemberChangePlugin">
|
||||
<div class="quick-actions">
|
||||
<el-button size="mini" type="primary" plain @click="useWelcomeTemplate">
|
||||
欢迎配置模板(welcome)
|
||||
</el-button>
|
||||
<span class="quick-tip">仅当插件为“群成员变更监控”时显示</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-alert v-if="isMemberChangePlugin && !isWelcomeTemplateForm" type="info" :closable="false"
|
||||
title="点击“欢迎配置模板(welcome)”可切换到结构化表单。">
|
||||
</el-alert>
|
||||
|
||||
<template v-if="isWelcomeTemplateForm && editorMode === 'simple'">
|
||||
@@ -134,7 +143,16 @@
|
||||
</template>
|
||||
|
||||
<el-form-item label="JSON配置" v-if="!isWelcomeTemplateForm || editorMode === 'advanced'">
|
||||
<el-input type="textarea" :rows="12" v-model="form.config_json_text"></el-input>
|
||||
<div class="json-toolbar">
|
||||
<el-button size="mini" @click="formatJsonText">格式化 JSON</el-button>
|
||||
</div>
|
||||
<el-input
|
||||
class="json-editor"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 14, maxRows: 24 }"
|
||||
v-model="form.config_json_text"
|
||||
placeholder='请输入 JSON,例如:{"key":"value"}'>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
@@ -185,6 +203,16 @@ new Vue({
|
||||
this.loadRows()
|
||||
},
|
||||
computed: {
|
||||
groupNameMap() {
|
||||
const map = {}
|
||||
;(this.groupOptions || []).forEach(item => {
|
||||
map[String(item.wxid)] = String(item.name || item.wxid)
|
||||
})
|
||||
return map
|
||||
},
|
||||
isMemberChangePlugin() {
|
||||
return this.form.plugin_name === '群成员变更监控'
|
||||
},
|
||||
// 仅当命中当前已接入模板时启用标准表单,其它插件继续使用JSON高级模式。
|
||||
isWelcomeTemplateForm() {
|
||||
return this.form.plugin_name === '群成员变更监控' && this.form.config_key === 'welcome'
|
||||
@@ -230,6 +258,18 @@ new Vue({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getGroupName(groupId) {
|
||||
return this.groupNameMap[String(groupId)] || String(groupId || '-')
|
||||
},
|
||||
formatJsonText() {
|
||||
try {
|
||||
const parsed = JSON.parse(this.form.config_json_text || '{}')
|
||||
this.form.config_json_text = JSON.stringify(parsed, null, 2)
|
||||
this.$message.success('JSON 已格式化')
|
||||
} catch (e) {
|
||||
this.$message.error('JSON 格式错误,无法格式化')
|
||||
}
|
||||
},
|
||||
renderTemplate(template) {
|
||||
let result = String(template || '')
|
||||
Object.entries(this.previewVariables).forEach(([k, v]) => {
|
||||
@@ -417,5 +457,19 @@ new Vue({
|
||||
.preview-box p{margin:0 0 4px 0}
|
||||
.quick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||||
.quick-tip{font-size:12px;color:#64748b}
|
||||
.group-cell{display:flex;flex-direction:column;gap:4px}
|
||||
.group-name{font-size:14px;font-weight:600;color:#0f172a}
|
||||
.group-id{font-size:12px;color:#94a3b8}
|
||||
.group-option{display:flex;flex-direction:column;line-height:1.35;padding:2px 0}
|
||||
.group-option-name{font-size:13px;color:#0f172a}
|
||||
.group-option-id{font-size:12px;color:#94a3b8}
|
||||
.json-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}
|
||||
.json-editor .el-textarea__inner{
|
||||
font-family:Consolas,"SFMono-Regular","Courier New",monospace;
|
||||
font-size:13px;
|
||||
line-height:1.6;
|
||||
background:#f8fbff;
|
||||
border:1px solid #d7e6f5;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user