优化管理员面板中的JSON编辑器，替换为Ace编辑器，更新相关样式和功能，添加格式化按钮和错误提示，简化初始化逻辑，确保编辑器在不同模态下的兼容性。
This commit is contained in:
dockermen
parent
9bde4224c7
commit
18c44797b1
@ -223,20 +223,20 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">配置信息 (JSON)</label>
|
||||
<div class="position-relative">
|
||||
<div id="jsonEditor" class="border rounded" style="height: 200px; font-family: monospace;"></div>
|
||||
<textarea class="form-control d-none" name="config_json" id="jsonConfig"></textarea>
|
||||
<div class="position-relative json-editor-area">
|
||||
<div class="ace-editor border rounded" style="height: 200px; font-family: monospace;"></div>
|
||||
<textarea class="form-control d-none json-config-textarea" name="config_json"></textarea>
|
||||
<div class="position-absolute top-0 end-0 p-2">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button" id="formatJsonBtn">
|
||||
<button class="btn btn-sm btn-outline-secondary format-json-btn" type="button">
|
||||
<i class="bi bi-code-square"></i> 格式化
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<div class="form-text">请输入有效的JSON格式配置信息</div>
|
||||
<div class="form-text text-end"><span id="jsonLineCount">0</span> 行 | <span id="jsonCharCount">0</span> 字符</div>
|
||||
<div class="form-text text-end"><span class="json-line-count">0</span> 行 | <span class="json-char-count">0</span> 字符</div>
|
||||
</div>
|
||||
<div id="jsonError" class="invalid-feedback"></div>
|
||||
<div class="json-error invalid-feedback"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -261,20 +261,20 @@
|
||||
<form id="editudriveForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">配置信息 (JSON)</label>
|
||||
<div class="position-relative">
|
||||
<div id="jsonEditor1" class="border rounded" style="height: 200px; font-family: monospace;"></div>
|
||||
<textarea class="form-control d-none" name="config_json" id="jsonConfig1"></textarea>
|
||||
<div class="position-relative json-editor-area">
|
||||
<div class="ace-editor border rounded" style="height: 200px; font-family: monospace;"></div>
|
||||
<textarea class="form-control d-none json-config-textarea" name="config_json"></textarea>
|
||||
<div class="position-absolute top-0 end-0 p-2">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button" id="formatJsonBtn">
|
||||
<button class="btn btn-sm btn-outline-secondary format-json-btn" type="button">
|
||||
<i class="bi bi-code-square"></i> 格式化
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-1">
|
||||
<div class="form-text">请输入有效的JSON格式配置信息</div>
|
||||
<div class="form-text text-end"><span id="jsonLineCount1">0</span> 行 | <span id="jsonCharCount1">0</span> 字符</div>
|
||||
<div class="form-text text-end"><span class="json-line-count">0</span> 行 | <span class="json-char-count">0</span> 字符</div>
|
||||
</div>
|
||||
<div id="jsonError" class="invalid-feedback"></div>
|
||||
<div class="json-error invalid-feedback"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -489,25 +489,15 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 添加Ace编辑器的CDN引用
|
||||
function loadAceEditor() {
|
||||
if (typeof ace === 'undefined') {
|
||||
// 如果ace未定义，直接初始化编辑器
|
||||
initAceEditor();
|
||||
} else {
|
||||
initAceEditor();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// json编辑器处理
|
||||
function initAceEditor() {
|
||||
// 初始化编辑器
|
||||
const editor = ace.edit("jsonEditor");
|
||||
const editor1 = ace.edit("jsonEditor1");
|
||||
function initAceEditor(editorElement) {
|
||||
const editor = ace.edit(editorElement);
|
||||
const editorArea = editorElement.closest('.json-editor-area');
|
||||
const parentContainer = editorArea.closest('.mb-3'); // Get parent container
|
||||
const configTextarea = editorArea.querySelector('.json-config-textarea');
|
||||
const lineCountSpan = parentContainer.querySelector('.json-line-count'); // Search from parent
|
||||
const charCountSpan = parentContainer.querySelector('.json-char-count'); // Search from parent
|
||||
|
||||
// 配置两个编辑器
|
||||
const configureEditor = function(editor, configId, lineCountId, charCountId) {
|
||||
editor.setTheme("ace/theme/monokai");
|
||||
editor.session.setMode("ace/mode/json");
|
||||
editor.setOptions({
|
||||
@ -517,132 +507,110 @@
|
||||
enableLiveAutocompletion: true
|
||||
});
|
||||
|
||||
// 同步到隐藏的textarea
|
||||
// 同步到隐藏的textarea并更新计数
|
||||
editor.getSession().on('change', function() {
|
||||
document.getElementById(configId).value = editor.getSession().getValue();
|
||||
document.getElementById(lineCountId).textContent = editor.getSession().getLength();
|
||||
document.getElementById(charCountId).textContent = editor.getSession().getValue().length;
|
||||
const value = editor.getSession().getValue();
|
||||
configTextarea.value = value;
|
||||
lineCountSpan.textContent = editor.getSession().getLength();
|
||||
charCountSpan.textContent = value.length;
|
||||
});
|
||||
};
|
||||
|
||||
// 应用配置到两个编辑器
|
||||
configureEditor(editor, 'jsonConfig', 'jsonLineCount', 'jsonCharCount');
|
||||
configureEditor(editor1, 'jsonConfig1', 'jsonLineCount1', 'jsonCharCount1');
|
||||
// 触发一次change事件以初始化计数
|
||||
editor.getSession().setValue(configTextarea.value, -1);
|
||||
|
||||
// 格式化按钮
|
||||
document.getElementById('formatJsonBtn').addEventListener('click', function() {
|
||||
const activeEditor = document.activeElement.closest('#jsonEditor') ? editor :
|
||||
document.activeElement.closest('#jsonEditor1') ? editor1 : editor;
|
||||
const editorElement = activeEditor === editor ? 'jsonEditor' : 'jsonEditor1';
|
||||
return editor;
|
||||
}
|
||||
|
||||
function setupJsonEditors() {
|
||||
document.querySelectorAll('.ace-editor').forEach(editorElement => {
|
||||
const editor = initAceEditor(editorElement);
|
||||
const editorArea = editorElement.closest('.json-editor-area');
|
||||
const formatButton = editorArea.querySelector('.format-json-btn');
|
||||
const parentContainer = editorArea.closest('.mb-3'); // Get parent container
|
||||
const errorDisplay = parentContainer.querySelector('.json-error'); // Search from parent
|
||||
|
||||
// 格式化按钮事件
|
||||
formatButton.addEventListener('click', function() {
|
||||
try {
|
||||
const json = JSON.parse(activeEditor.getSession().getValue());
|
||||
activeEditor.setValue(JSON.stringify(json, null, 2), -1);
|
||||
document.getElementById('jsonError').textContent = '';
|
||||
document.getElementById(editorElement).classList.remove('border-danger');
|
||||
const json = JSON.parse(editor.getSession().getValue());
|
||||
editor.setValue(JSON.stringify(json, null, 2), -1);
|
||||
errorDisplay.textContent = '';
|
||||
errorDisplay.style.display = 'none';
|
||||
editorElement.classList.remove('border-danger');
|
||||
} catch (e) {
|
||||
document.getElementById('jsonError').textContent = '无效的JSON格式: ' + e.message;
|
||||
document.getElementById('jsonError').style.display = 'block';
|
||||
document.getElementById(editorElement).classList.add('border-danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadAceEditor();
|
||||
});
|
||||
|
||||
// 设置默认JSON模板
|
||||
document.getElementById('driveType').addEventListener('change', function() {
|
||||
const editor = ace.edit("jsonEditor");
|
||||
const selectedType = this.value;
|
||||
|
||||
if (selectedType) {
|
||||
let defaultJson = {};
|
||||
|
||||
// 获取所有网盘提供商数据
|
||||
const providers = JSON.parse('{{ providers | tojson }}');
|
||||
|
||||
// 查找选中的网盘提供商
|
||||
const selectedProvider = providers.find(provider => provider.provider_name === selectedType);
|
||||
|
||||
if (selectedProvider && selectedProvider.config_vars) {
|
||||
// 如果找到对应的提供商配置，直接使用
|
||||
defaultJson = selectedProvider.config_vars;
|
||||
} else {
|
||||
// 如果没有找到对应配置，使用默认模板
|
||||
defaultJson = {
|
||||
"provider_name": selectedType,
|
||||
"config": {
|
||||
"api_key": "",
|
||||
"secret_key": "",
|
||||
"redirect_uri": ""
|
||||
},
|
||||
"auth": {
|
||||
"token": "",
|
||||
"expires_in": 0
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 设置编辑器内容
|
||||
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
|
||||
errorDisplay.textContent = '无效的JSON格式: ' + e.message;
|
||||
errorDisplay.style.display = 'block';
|
||||
editorElement.classList.add('border-danger');
|
||||
}
|
||||
});
|
||||
|
||||
// 设置编辑用户驱动JSON模板
|
||||
document.getElementById('editudrivebtn').addEventListener('click', function() {
|
||||
const editor = ace.edit("jsonEditor1");
|
||||
const selectedtid = this.getAttribute('tid');
|
||||
if (selectedtid) {
|
||||
let defaultJson = {};
|
||||
|
||||
// 获取所有网盘提供商数据
|
||||
const user_drives = JSON.parse('{{ alluser_drives | tojson }}');
|
||||
// 查找选中的网盘提供商
|
||||
console.log(typeof(selectedtid));
|
||||
const selectedUdrive = user_drives.find(user_drive => user_drive.id == selectedtid);
|
||||
console.log(selectedtid,selectedUdrive)
|
||||
if (selectedUdrive && selectedUdrive.login_config) {
|
||||
// 如果找到对应的提供商配置，直接使用
|
||||
defaultJson = selectedUdrive.login_config;
|
||||
} else {
|
||||
// 如果没有找到对应配置，使用默认模板
|
||||
defaultJson = {
|
||||
"provider_name": selectedtid,
|
||||
"config": {
|
||||
"api_key": "",
|
||||
"secret_key": "",
|
||||
"redirect_uri": ""
|
||||
},
|
||||
"auth": {
|
||||
"token": "",
|
||||
"expires_in": 0
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 设置编辑器内容
|
||||
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化时设置一个空的JSON结构
|
||||
window.addEventListener('load', function() {
|
||||
const editor = ace.edit("jsonEditor");
|
||||
const editor1 = ace.edit("jsonEditor1");
|
||||
// 默认设置一个空的JSON结构
|
||||
const emptyJson = {
|
||||
"provider_name": "",
|
||||
"config": {},
|
||||
"auth": {}
|
||||
};
|
||||
const jsonString = JSON.stringify(emptyJson, null, 2);
|
||||
|
||||
// 为两个编辑器设置相同的初始值
|
||||
if (!editor.getValue()) {
|
||||
editor.setValue(jsonString, -1);
|
||||
editor1.setValue(jsonString, -1);
|
||||
document.getElementById('jsonConfig').value = jsonString;
|
||||
document.getElementById('jsonConfig1').value = jsonString;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setupJsonEditors(); // 初始化所有编辑器
|
||||
});
|
||||
|
||||
// 设置默认JSON模板 (Add Modal specific)
|
||||
document.getElementById('driveType').addEventListener('change', function() {
|
||||
const addModalEditorArea = document.querySelector('#addAccountModal .json-editor-area');
|
||||
const editorElement = addModalEditorArea.querySelector('.ace-editor');
|
||||
const editor = ace.edit(editorElement); // Get the Ace editor instance
|
||||
const selectedType = this.value;
|
||||
|
||||
if (selectedType) {
|
||||
let defaultJson = {};
|
||||
const providers = JSON.parse('{{ providers | tojson | safe }}'); // Use safe filter
|
||||
const selectedProvider = providers.find(provider => provider.provider_name === selectedType);
|
||||
|
||||
if (selectedProvider && selectedProvider.config_vars) {
|
||||
defaultJson = selectedProvider.config_vars;
|
||||
} else {
|
||||
defaultJson = {
|
||||
"provider_name": selectedType,
|
||||
"config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
|
||||
"auth": { "token": "", "expires_in": 0 }
|
||||
};
|
||||
}
|
||||
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
|
||||
}
|
||||
});
|
||||
|
||||
// 设置编辑用户驱动JSON模板 (Edit Modal specific)
|
||||
document.querySelectorAll('#editudrivebtn').forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const editModalEditorArea = document.querySelector('#editudriveModal .json-editor-area');
|
||||
const editorElement = editModalEditorArea.querySelector('.ace-editor');
|
||||
const editor = ace.edit(editorElement); // Get the Ace editor instance
|
||||
const selectedtid = this.getAttribute('tid');
|
||||
|
||||
if (selectedtid) {
|
||||
let defaultJson = {};
|
||||
const user_drives = JSON.parse('{{ alluser_drives | tojson | safe }}'); // Use safe filter
|
||||
const selectedUdrive = user_drives.find(user_drive => user_drive.id == selectedtid);
|
||||
|
||||
if (selectedUdrive && selectedUdrive.login_config) {
|
||||
defaultJson = selectedUdrive.login_config;
|
||||
} else {
|
||||
defaultJson = {
|
||||
"provider_name": selectedtid, // Keep provider_name for context if no config
|
||||
"config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
|
||||
"auth": { "token": "", "expires_in": 0 }
|
||||
};
|
||||
}
|
||||
editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user