调整toml格式的内容显示与编辑
This commit is contained in:
liuwei
@@ -80,7 +80,30 @@
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="配置信息" :span="2" v-if="selectedPlugin.config">
|
||||
<div class="config-container">
|
||||
<pre>{% raw %}{{ JSON.stringify(selectedPlugin.config, null, 2) }}{% endraw %}</pre>
|
||||
<div class="config-actions">
|
||||
<el-button type="primary" size="mini" @click="editConfig" :disabled="isEditingConfig">
|
||||
编辑配置
|
||||
</el-button>
|
||||
<el-button type="success" size="mini" @click="saveConfig" v-if="isEditingConfig">
|
||||
保存配置
|
||||
</el-button>
|
||||
<el-button type="info" size="mini" @click="cancelEditConfig" v-if="isEditingConfig">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="!isEditingConfig">
|
||||
<pre>{% raw %}{{ selectedPlugin.configText }}{% endraw %}</pre>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="editedConfig"
|
||||
:rows="10"
|
||||
placeholder="请输入TOML格式的配置"
|
||||
class="config-editor"
|
||||
></el-input>
|
||||
<div class="config-error" v-if="configError">{% raw %}{{ configError }}{% endraw %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@@ -99,7 +122,11 @@
|
||||
plugins: [],
|
||||
selectedPlugin: null,
|
||||
pluginInfoVisible: false,
|
||||
loading: false
|
||||
loading: false,
|
||||
isEditingConfig: false,
|
||||
editedConfig: '',
|
||||
configError: '',
|
||||
configFormat: 'toml' // 默认为toml格式
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -182,13 +209,106 @@
|
||||
this.$message.info('已取消操作');
|
||||
});
|
||||
},
|
||||
// 编辑配置
|
||||
editConfig() {
|
||||
this.isEditingConfig = true;
|
||||
this.editedConfig = this.selectedPlugin.configText || '';
|
||||
this.configError = '';
|
||||
},
|
||||
|
||||
// 取消编辑配置
|
||||
cancelEditConfig() {
|
||||
this.isEditingConfig = false;
|
||||
this.editedConfig = '';
|
||||
this.configError = '';
|
||||
},
|
||||
|
||||
// 保存配置
|
||||
saveConfig() {
|
||||
try {
|
||||
// 验证TOML格式
|
||||
let configObj;
|
||||
try {
|
||||
configObj = toml.parse(this.editedConfig);
|
||||
} catch (e) {
|
||||
this.configError = 'TOML格式错误: ' + e.message;
|
||||
return;
|
||||
}
|
||||
|
||||
// 发送到后端保存
|
||||
axios.post('/api/plugins/config/update', {
|
||||
plugin_name: this.selectedPlugin.module_name,
|
||||
config_text: this.editedConfig,
|
||||
format: 'toml'
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.$message.success('配置保存成功');
|
||||
this.isEditingConfig = false;
|
||||
|
||||
// 更新本地配置显示
|
||||
this.selectedPlugin.configText = this.editedConfig;
|
||||
this.selectedPlugin.config = configObj;
|
||||
|
||||
// 询问是否要重载插件以应用新配置
|
||||
this.$confirm('配置已保存，是否要重载插件以应用新配置?', '提示', {
|
||||
confirmButtonText: '重载插件',
|
||||
cancelButtonText: '稍后手动重载',
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
this.reloadPlugin(this.selectedPlugin);
|
||||
}).catch(() => {
|
||||
this.$message.info('您可以稍后手动重载插件以应用新配置');
|
||||
});
|
||||
} else {
|
||||
this.configError = response.data.message || '保存配置失败';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('保存配置出错:', error);
|
||||
this.configError = '保存配置出错: ' + (error.response?.data?.message || error.message);
|
||||
});
|
||||
} catch (e) {
|
||||
this.configError = '处理配置时出错: ' + e.message;
|
||||
}
|
||||
},
|
||||
|
||||
// 修改现有的showPluginInfo方法，获取原始配置文本
|
||||
showPluginInfo(plugin) {
|
||||
// 获取插件详细信息
|
||||
axios.get(`/api/plugins/info?plugin_name=${plugin.module_name}`)
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.selectedPlugin = response.data.data;
|
||||
this.pluginInfoVisible = true;
|
||||
// 如果有配置文本，直接使用
|
||||
if (this.selectedPlugin.configText) {
|
||||
this.pluginInfoVisible = true;
|
||||
this.isEditingConfig = false;
|
||||
this.editedConfig = '';
|
||||
this.configError = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果没有配置文本，获取原始配置文件内容
|
||||
axios.get(`/api/plugins/config/raw?plugin_name=${plugin.module_name}`)
|
||||
.then(configResponse => {
|
||||
if (configResponse.data.success) {
|
||||
this.selectedPlugin.configText = configResponse.data.data;
|
||||
this.configFormat = configResponse.data.format || 'toml';
|
||||
} else {
|
||||
this.selectedPlugin.configText = '# 无法获取原始配置文件';
|
||||
console.error('获取配置文件失败:', configResponse.data.message);
|
||||
}
|
||||
this.pluginInfoVisible = true;
|
||||
this.isEditingConfig = false;
|
||||
this.editedConfig = '';
|
||||
this.configError = '';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取配置文件出错:', error);
|
||||
this.selectedPlugin.configText = '# 获取配置文件时出错';
|
||||
this.pluginInfoVisible = true;
|
||||
});
|
||||
} else {
|
||||
this.$message.error(response.data.message || '获取插件详情失败');
|
||||
}
|
||||
@@ -248,5 +368,24 @@
|
||||
.config-container::-webkit-scrollbar-track {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* ... 现有样式保持不变 ... */
|
||||
|
||||
.config-actions {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.config-editor {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.config-error {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user