From f5dfe0b2963308446813ac074da74450152bca2e Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Mon, 20 Apr 2026 11:23:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BE=A4=E7=BA=A7=E9=85=8D=E7=BD=AE):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BE=A4=E6=98=BE=E7=A4=BA=E3=80=81=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E5=85=A5=E5=8F=A3=E5=92=8CJSON=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 列表中群信息改为群名主展示，ID弱化展示
- 模板入口改为按插件动态显示：仅选择群成员变更监控时显示欢迎模板按钮
- 移除顶部通用快捷模板，减少误导
- JSON编辑区升级为多行自适应编辑器，增加等宽字体与格式化按钮
---
 .../templates/group_plugin_config.html        | 88 +++++++++++++++----
 1 file changed, 71 insertions(+), 17 deletions(-)

diff --git a/admin/dashboard/templates/group_plugin_config.html b/admin/dashboard/templates/group_plugin_config.html
index 551223d..7917a57 100644
--- a/admin/dashboard/templates/group_plugin_config.html
+++ b/admin/dashboard/templates/group_plugin_config.html
@@ -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 %}