chenzhilong/TenantDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化管理员面板中的JSON编辑器，替换为Ace编辑器，更新相关样式和功能，添加格式化按钮和错误提示，简化初始化逻辑，确保编辑器在不同模态下的兼容性。

Browse Source
This commit is contained in:
dockermen 2025-04-10 21:03:18 +08:00
parent 9bde4224c7
commit 18c44797b1
1 changed files with 102 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
templates/admin.html
View File

@ -223,20 +223,20 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">配置信息 (JSON)</label> <label class="form-label">配置信息 (JSON)</label>
<div class="position-relative"> <div class="position-relative json-editor-area">
<div id="jsonEditor" class="border rounded" style="height: 200px; font-family: monospace;"></div> <div class="ace-editor border rounded" style="height: 200px; font-family: monospace;"></div>
<textarea class="form-control d-none" name="config_json" id="jsonConfig"></textarea> <textarea class="form-control d-none json-config-textarea" name="config_json"></textarea>
<div class="position-absolute top-0 end-0 p-2"> <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> 格式化 <i class="bi bi-code-square"></i> 格式化
</button> </button>
</div> </div>
</div> </div>
<div class="d-flex justify-content-between mt-1"> <div class="d-flex justify-content-between mt-1">
<div class="form-text">请输入有效的JSON格式配置信息</div> <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>
<div id="jsonError" class="invalid-feedback"></div> <div class="json-error invalid-feedback"></div>
</div> </div>
</form> </form>
</div> </div>
@ -261,20 +261,20 @@
<form id="editudriveForm"> <form id="editudriveForm">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">配置信息 (JSON)</label> <label class="form-label">配置信息 (JSON)</label>
<div class="position-relative"> <div class="position-relative json-editor-area">
<div id="jsonEditor1" class="border rounded" style="height: 200px; font-family: monospace;"></div> <div class="ace-editor border rounded" style="height: 200px; font-family: monospace;"></div>
<textarea class="form-control d-none" name="config_json" id="jsonConfig1"></textarea> <textarea class="form-control d-none json-config-textarea" name="config_json"></textarea>
<div class="position-absolute top-0 end-0 p-2"> <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> 格式化 <i class="bi bi-code-square"></i> 格式化
</button> </button>
</div> </div>
</div> </div>
<div class="d-flex justify-content-between mt-1"> <div class="d-flex justify-content-between mt-1">
<div class="form-text">请输入有效的JSON格式配置信息</div> <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>
<div id="jsonError" class="invalid-feedback"></div> <div class="json-error invalid-feedback"></div>
</div> </div>
</form> </form>
</div> </div>
@ -489,160 +489,128 @@
} }
}); });
// 添加Ace编辑器的CDN引用 // json编辑器处理
function loadAceEditor() { function initAceEditor(editorElement) {
if (typeof ace === 'undefined') { const editor = ace.edit(editorElement);
// 如果ace未定义，直接初始化编辑器 const editorArea = editorElement.closest('.json-editor-area');
initAceEditor(); const parentContainer = editorArea.closest('.mb-3'); // Get parent container
} else { const configTextarea = editorArea.querySelector('.json-config-textarea');
initAceEditor(); const lineCountSpan = parentContainer.querySelector('.json-line-count'); // Search from parent
} const charCountSpan = parentContainer.querySelector('.json-char-count'); // Search from parent
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/json");
editor.setOptions({
fontSize: "12pt",
showPrintMargin: false,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
});
// 同步到隐藏的textarea并更新计数
editor.getSession().on('change', function() {
const value = editor.getSession().getValue();
configTextarea.value = value;
lineCountSpan.textContent = editor.getSession().getLength();
charCountSpan.textContent = value.length;
});
// 触发一次change事件以初始化计数
editor.getSession().setValue(configTextarea.value, -1);
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
// json编辑器处理 // 格式化按钮事件
function initAceEditor() { formatButton.addEventListener('click', function() {
// 初始化编辑器 try {
const editor = ace.edit("jsonEditor"); const json = JSON.parse(editor.getSession().getValue());
const editor1 = ace.edit("jsonEditor1"); editor.setValue(JSON.stringify(json, null, 2), -1);
errorDisplay.textContent = '';
// 配置两个编辑器 errorDisplay.style.display = 'none';
const configureEditor = function(editor, configId, lineCountId, charCountId) { editorElement.classList.remove('border-danger');
editor.setTheme("ace/theme/monokai"); } catch (e) {
editor.session.setMode("ace/mode/json"); errorDisplay.textContent = '无效的JSON格式: ' + e.message;
editor.setOptions({ errorDisplay.style.display = 'block';
fontSize: "12pt", editorElement.classList.add('border-danger');
showPrintMargin: false, }
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
}); });
// 同步到隐藏的textarea // 默认设置一个空的JSON结构
editor.getSession().on('change', function() { const emptyJson = {
document.getElementById(configId).value = editor.getSession().getValue(); "provider_name": "",
document.getElementById(lineCountId).textContent = editor.getSession().getLength(); "config": {},
document.getElementById(charCountId).textContent = editor.getSession().getValue().length; "auth": {}
}); };
}; const jsonString = JSON.stringify(emptyJson, null, 2);
if (!editor.getValue()) {
// 应用配置到两个编辑器 editor.setValue(jsonString, -1);
configureEditor(editor, 'jsonConfig', 'jsonLineCount', 'jsonCharCount');
configureEditor(editor1, 'jsonConfig1', 'jsonLineCount1', 'jsonCharCount1');
// 格式化按钮
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';
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');
} 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() { document.addEventListener('DOMContentLoaded', function() {
loadAceEditor(); setupJsonEditors(); // 初始化所有编辑器
}); });
// 设置默认JSON模板 // 设置默认JSON模板 (Add Modal specific)
document.getElementById('driveType').addEventListener('change', function() { document.getElementById('driveType').addEventListener('change', function() {
const editor = ace.edit("jsonEditor"); 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; const selectedType = this.value;
if (selectedType) { if (selectedType) {
let defaultJson = {}; let defaultJson = {};
const providers = JSON.parse('{{ providers | tojson | safe }}'); // Use safe filter
// 获取所有网盘提供商数据
const providers = JSON.parse('{{ providers | tojson }}');
// 查找选中的网盘提供商
const selectedProvider = providers.find(provider => provider.provider_name === selectedType); const selectedProvider = providers.find(provider => provider.provider_name === selectedType);
if (selectedProvider && selectedProvider.config_vars) { if (selectedProvider && selectedProvider.config_vars) {
// 如果找到对应的提供商配置，直接使用
defaultJson = selectedProvider.config_vars; defaultJson = selectedProvider.config_vars;
} else { } else {
// 如果没有找到对应配置，使用默认模板
defaultJson = { defaultJson = {
"provider_name": selectedType, "provider_name": selectedType,
"config": { "config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
"api_key": "", "auth": { "token": "", "expires_in": 0 }
"secret_key": "",
"redirect_uri": ""
},
"auth": {
"token": "",
"expires_in": 0
}
}; };
} }
// 设置编辑器内容
editor.setValue(JSON.stringify(defaultJson, null, 2), -1); editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
} }
}); });
// 设置编辑用户驱动JSON模板 // 设置编辑用户驱动JSON模板 (Edit Modal specific)
document.getElementById('editudrivebtn').addEventListener('click', function() { document.querySelectorAll('#editudrivebtn').forEach(button => {
const editor = ace.edit("jsonEditor1"); button.addEventListener('click', function() {
const selectedtid = this.getAttribute('tid'); const editModalEditorArea = document.querySelector('#editudriveModal .json-editor-area');
if (selectedtid) { const editorElement = editModalEditorArea.querySelector('.ace-editor');
let defaultJson = {}; const editor = ace.edit(editorElement); // Get the Ace editor instance
const selectedtid = this.getAttribute('tid');
// 获取所有网盘提供商数据 if (selectedtid) {
const user_drives = JSON.parse('{{ alluser_drives | tojson }}'); let defaultJson = {};
// 查找选中的网盘提供商 const user_drives = JSON.parse('{{ alluser_drives | tojson | safe }}'); // Use safe filter
console.log(typeof(selectedtid)); const selectedUdrive = user_drives.find(user_drive => user_drive.id == selectedtid);
const selectedUdrive = user_drives.find(user_drive => user_drive.id == selectedtid);
console.log(selectedtid,selectedUdrive) if (selectedUdrive && selectedUdrive.login_config) {
if (selectedUdrive && selectedUdrive.login_config) { defaultJson = selectedUdrive.login_config;
// 如果找到对应的提供商配置，直接使用 } else {
defaultJson = selectedUdrive.login_config; defaultJson = {
} else { "provider_name": selectedtid, // Keep provider_name for context if no config
// 如果没有找到对应配置，使用默认模板 "config": { "api_key": "", "secret_key": "", "redirect_uri": "" },
defaultJson = { "auth": { "token": "", "expires_in": 0 }
"provider_name": selectedtid, };
"config": { }
"api_key": "", editor.setValue(JSON.stringify(defaultJson, null, 2), -1);
"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");
const emptyJson = {
"provider_name": "",
"config": {},
"auth": {}
};
const jsonString = JSON.stringify(emptyJson, null, 2);
// 为两个编辑器设置相同的初始值
editor.setValue(jsonString, -1);
editor1.setValue(jsonString, -1);
document.getElementById('jsonConfig').value = jsonString;
document.getElementById('jsonConfig1').value = jsonString;
}); });
</script> </script>
</body> </body>