770 lines
25 KiB
JavaScript
770 lines
25 KiB
JavaScript
/**
|
||
* 主应用逻辑
|
||
* 负责状态管理、事件绑定、界面渲染，以及维度筛选、地址栏导航与三种模式的差异化控制
|
||
*/
|
||
|
||
// 全局应用状态
|
||
const state = {
|
||
projects: [], // 项目列表
|
||
currentProject: null, // 当前选中项目
|
||
configs: [], // 当前项目全部配置（含 path）
|
||
visibleConfigs: [], // 右侧面板当前展示的配置
|
||
mode: "edit", // 当前模式: plan/edit/readonly
|
||
editingConfigId: null, // 正在编辑的配置项 ID（null 表示新增）
|
||
confirmCallback: null, // 确认框回调
|
||
dimFilter: { idc: "", environment: "", group: "" }, // 维度栏筛选值（空=全部）
|
||
};
|
||
|
||
/**
|
||
* 显示 Toast 提示
|
||
* @param {string} message - 提示内容
|
||
* @param {string} type - 类型: success/error/info
|
||
* @returns {void}
|
||
*/
|
||
function toast(message, type = "info") {
|
||
const el = document.createElement("div");
|
||
el.className = `toast toast-${type}`;
|
||
el.textContent = message;
|
||
document.body.appendChild(el);
|
||
setTimeout(() => el.remove(), 2500);
|
||
}
|
||
|
||
/**
|
||
* 设置状态栏文字
|
||
* @param {string} text - 状态文字
|
||
* @returns {void}
|
||
*/
|
||
function setStatus(text) {
|
||
document.getElementById("status-text").textContent = text;
|
||
}
|
||
|
||
/**
|
||
* 打开模态框
|
||
* @param {string} id - 模态框元素 ID
|
||
* @returns {void}
|
||
*/
|
||
function openModal(id) {
|
||
document.getElementById(id).style.display = "flex";
|
||
}
|
||
|
||
/**
|
||
* 关闭模态框
|
||
* @param {string} id - 模态框元素 ID
|
||
* @returns {void}
|
||
*/
|
||
function closeModal(id) {
|
||
document.getElementById(id).style.display = "none";
|
||
}
|
||
|
||
/**
|
||
* 模式的中文名称映射
|
||
*/
|
||
const MODE_NAMES = { plan: "规划", edit: "编辑", readonly: "只读" };
|
||
|
||
/**
|
||
* 映射方式中文名称
|
||
*/
|
||
const MAPPING_NAMES = { path: "路径", label: "标签" };
|
||
|
||
/**
|
||
* 应用当前模式到界面（更新样式类、按钮状态、状态栏）
|
||
* @returns {void}
|
||
*/
|
||
function applyMode() {
|
||
document.body.classList.remove("mode-plan", "mode-edit", "mode-readonly");
|
||
document.body.classList.add(`mode-${state.mode}`);
|
||
document.querySelectorAll(".mode-btn").forEach((btn) => {
|
||
btn.classList.toggle("active", btn.dataset.mode === state.mode);
|
||
});
|
||
document.getElementById("status-mode").textContent = `当前模式：${MODE_NAMES[state.mode]}`;
|
||
}
|
||
|
||
/**
|
||
* HTML 转义，防止 XSS
|
||
* @param {string} str - 原始字符串
|
||
* @returns {string} 转义后的字符串
|
||
*/
|
||
function escapeHtml(str) {
|
||
const div = document.createElement("div");
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
/**
|
||
* 加载项目列表并填充选择器
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function loadProjects() {
|
||
state.projects = await API.getProjects();
|
||
const selector = document.getElementById("project-selector");
|
||
selector.innerHTML = '<option value="">-- 选择项目 --</option>';
|
||
state.projects.forEach((p) => {
|
||
const opt = document.createElement("option");
|
||
opt.value = p.id;
|
||
opt.textContent = p.name;
|
||
selector.appendChild(opt);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 选中并加载指定项目的配置
|
||
* @param {string} projectId - 项目 ID
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function selectProject(projectId) {
|
||
state.dimFilter = { idc: "", environment: "", group: "" };
|
||
if (!projectId) {
|
||
state.currentProject = null;
|
||
state.configs = [];
|
||
document.getElementById("current-project-name").textContent = "未选择项目";
|
||
renderDimensionBar();
|
||
Tree.render(document.getElementById("tree-content"), null, [], onTreeSelect);
|
||
renderConfigTable([], "/");
|
||
return;
|
||
}
|
||
state.currentProject = state.projects.find((p) => p.id === projectId);
|
||
state.configs = await API.getConfigs(projectId);
|
||
document.getElementById("current-project-name").textContent = state.currentProject.name;
|
||
renderDimensionBar();
|
||
refreshTree();
|
||
renderConfigTable(state.configs, "/");
|
||
setStatus(`已加载项目：${state.currentProject.name}，共 ${state.configs.length} 项配置`);
|
||
}
|
||
|
||
/**
|
||
* 依据 label 维度筛选，得到用于展示的配置列表
|
||
* 仅映射为 label 的维度参与筛选；映射为 path 的维度已体现在树路径中
|
||
* @returns {Array} 筛选后的配置列表
|
||
*/
|
||
function getFilteredConfigs() {
|
||
const p = state.currentProject;
|
||
if (!p) return [];
|
||
return state.configs.filter((c) => {
|
||
if (p.enableIdc && p.idcMapping === "label" && state.dimFilter.idc && c.idc !== state.dimFilter.idc) return false;
|
||
if (p.enableEnvironment && p.environmentMapping === "label" && state.dimFilter.environment && c.environment !== state.dimFilter.environment) return false;
|
||
if (p.enableGroup && p.groupMapping === "label" && state.dimFilter.group && c.group !== state.dimFilter.group) return false;
|
||
return true;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 重新构建并渲染配置树（应用当前维度筛选）
|
||
* @returns {void}
|
||
*/
|
||
function refreshTree() {
|
||
Tree.render(document.getElementById("tree-content"), state.currentProject, getFilteredConfigs(), onTreeSelect);
|
||
}
|
||
|
||
/**
|
||
* 收集某维度在当前项目配置中出现过的全部取值
|
||
* @param {string} field - 维度字段名（idc/environment/group）
|
||
* @returns {Array<string>} 去重后的取值列表
|
||
*/
|
||
function collectDimValues(field) {
|
||
const set = new Set();
|
||
state.configs.forEach((c) => {
|
||
if (c[field]) set.add(c[field]);
|
||
});
|
||
return Array.from(set).sort();
|
||
}
|
||
|
||
/**
|
||
* 渲染维度栏：展示已启用维度的筛选下拉与映射方式
|
||
* @returns {void}
|
||
*/
|
||
function renderDimensionBar() {
|
||
const p = state.currentProject;
|
||
const mappingBtn = document.getElementById("btn-dim-mapping");
|
||
const items = [
|
||
{ key: "idc", enable: "enableIdc", mapping: "idcMapping", field: "idc", box: "dim-idc", sel: "dim-idc-select", map: "dim-idc-mapping" },
|
||
{ key: "environment", enable: "enableEnvironment", mapping: "environmentMapping", field: "environment", box: "dim-env", sel: "dim-env-select", map: "dim-env-mapping" },
|
||
{ key: "group", enable: "enableGroup", mapping: "groupMapping", field: "group", box: "dim-group", sel: "dim-group-select", map: "dim-group-mapping" },
|
||
];
|
||
|
||
if (!p) {
|
||
mappingBtn.style.display = "none";
|
||
items.forEach((it) => (document.getElementById(it.box).style.display = "none"));
|
||
return;
|
||
}
|
||
|
||
const anyEnabled = p.enableIdc || p.enableEnvironment || p.enableGroup;
|
||
mappingBtn.style.display = anyEnabled ? "" : "none";
|
||
|
||
items.forEach((it) => {
|
||
const box = document.getElementById(it.box);
|
||
if (!p[it.enable]) {
|
||
box.style.display = "none";
|
||
return;
|
||
}
|
||
box.style.display = "";
|
||
// 填充筛选下拉
|
||
const sel = document.getElementById(it.sel);
|
||
const values = collectDimValues(it.field);
|
||
sel.innerHTML = '<option value="">全部</option>' + values.map((v) => `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`).join("");
|
||
sel.value = state.dimFilter[it.key] || "";
|
||
// 展示映射方式
|
||
document.getElementById(it.map).textContent = `[${MAPPING_NAMES[p[it.mapping]] || "路径"}]`;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 树节点选中回调
|
||
* @param {Array} configs - 该节点下的配置列表
|
||
* @param {string} path - 节点路径
|
||
* @returns {void}
|
||
*/
|
||
function onTreeSelect(configs, path) {
|
||
state.visibleConfigs = configs;
|
||
renderConfigTable(configs, path);
|
||
}
|
||
|
||
/**
|
||
* 渲染右侧配置表格并同步地址栏
|
||
* @param {Array} configs - 配置项列表
|
||
* @param {string} path - 当前路径
|
||
* @returns {void}
|
||
*/
|
||
function renderConfigTable(configs, path) {
|
||
state.visibleConfigs = configs;
|
||
document.getElementById("address-input").value = path === "/" ? "" : path;
|
||
const tbody = document.getElementById("config-tbody");
|
||
tbody.innerHTML = "";
|
||
|
||
if (!configs || configs.length === 0) {
|
||
tbody.innerHTML = '<tr class="empty-row"><td colspan="5">当前节点暂无配置项</td></tr>';
|
||
return;
|
||
}
|
||
|
||
configs.forEach((cfg) => {
|
||
const tr = document.createElement("tr");
|
||
tr.innerHTML = `
|
||
<td class="config-key-cell">${escapeHtml(cfg.key)}</td>
|
||
<td class="config-value-cell">${escapeHtml(String(cfg.value))}</td>
|
||
<td><span class="type-badge">${escapeHtml(cfg.type)}</span></td>
|
||
<td>${escapeHtml(cfg.description)}</td>
|
||
<td>
|
||
<button class="row-btn view" data-action="view" data-id="${cfg.id}">查看</button>
|
||
<button class="row-btn" data-action="edit" data-id="${cfg.id}">编辑</button>
|
||
<button class="row-btn danger" data-action="delete" data-id="${cfg.id}">删除</button>
|
||
</td>
|
||
`;
|
||
tbody.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 根据当前项目维度开关，控制配置模态框中维度字段的显示
|
||
* @returns {void}
|
||
*/
|
||
function updateDimensionFields() {
|
||
const p = state.currentProject;
|
||
document.getElementById("dim-idc-group").style.display = p && p.enableIdc ? "" : "none";
|
||
document.getElementById("dim-env-group").style.display = p && p.enableEnvironment ? "" : "none";
|
||
document.getElementById("dim-group-group").style.display = p && p.enableGroup ? "" : "none";
|
||
}
|
||
|
||
/**
|
||
* 打开配置编辑模态框
|
||
* @param {Object|null} config - 配置项，null 表示新增
|
||
* @param {boolean} readonly - 是否只读查看
|
||
* @returns {void}
|
||
*/
|
||
function openConfigModal(config, readonly) {
|
||
state.editingConfigId = config ? config.id : null;
|
||
document.getElementById("modal-config-title").textContent = readonly
|
||
? "查看配置项"
|
||
: config
|
||
? "编辑配置项"
|
||
: "新增配置项";
|
||
|
||
// 新增时用维度栏当前筛选值预填维度，方便就地新增
|
||
const preIdc = config ? config.idc || "" : state.dimFilter.idc || "";
|
||
const preEnv = config ? config.environment || "" : state.dimFilter.environment || "";
|
||
const preGroup = config ? config.group || "" : state.dimFilter.group || "";
|
||
|
||
document.getElementById("config-key").value = config ? config.key : "";
|
||
document.getElementById("config-idc").value = preIdc;
|
||
document.getElementById("config-environment").value = preEnv;
|
||
document.getElementById("config-group").value = preGroup;
|
||
document.getElementById("config-value").value = config ? config.value : "";
|
||
document.getElementById("config-type").value = config ? config.type : "string";
|
||
document.getElementById("config-value-range").value = config ? config.valueRange || "" : "";
|
||
document.getElementById("config-description").value = config ? config.description : "";
|
||
document.getElementById("config-purpose").value = config ? config.purpose || "" : "";
|
||
|
||
updateDimensionFields();
|
||
applyFieldPermissions(readonly);
|
||
openModal("modal-config");
|
||
}
|
||
|
||
/**
|
||
* 根据模式和是否只读查看，设置配置模态框各字段的可编辑性
|
||
* 规划模式：结构字段(类型/说明/用途/范围/键名/维度)可改，值不可改
|
||
* 编辑模式：值可改，已有项的结构字段锁定
|
||
* 只读查看：全部禁用
|
||
* @param {boolean} readonly - 是否只读查看
|
||
* @returns {void}
|
||
*/
|
||
function applyFieldPermissions(readonly) {
|
||
const structFields = [
|
||
"config-key", "config-type", "config-value-range",
|
||
"config-description", "config-purpose",
|
||
"config-idc", "config-environment", "config-group",
|
||
];
|
||
const valueField = "config-value";
|
||
const saveBtn = document.getElementById("btn-save-config");
|
||
|
||
const disableAll = (disabled) => {
|
||
structFields.forEach((id) => (document.getElementById(id).disabled = disabled));
|
||
document.getElementById(valueField).disabled = disabled;
|
||
};
|
||
|
||
if (readonly || state.mode === "readonly") {
|
||
disableAll(true);
|
||
saveBtn.style.display = "none";
|
||
return;
|
||
}
|
||
|
||
saveBtn.style.display = "";
|
||
|
||
if (state.mode === "plan") {
|
||
// 规划模式：可改结构，值不可改
|
||
structFields.forEach((id) => (document.getElementById(id).disabled = false));
|
||
document.getElementById(valueField).disabled = true;
|
||
} else if (state.mode === "edit") {
|
||
// 编辑模式：新增时结构可填；编辑已有项时仅值可改（键名/维度也允许调整路径）
|
||
const isNew = !state.editingConfigId;
|
||
document.getElementById("config-type").disabled = !isNew;
|
||
document.getElementById("config-value-range").disabled = !isNew;
|
||
document.getElementById("config-description").disabled = !isNew;
|
||
document.getElementById("config-purpose").disabled = !isNew;
|
||
document.getElementById("config-key").disabled = false;
|
||
document.getElementById("config-idc").disabled = false;
|
||
document.getElementById("config-environment").disabled = false;
|
||
document.getElementById("config-group").disabled = false;
|
||
document.getElementById(valueField).disabled = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 收集配置模态框表单数据
|
||
* @returns {Object} 表单数据
|
||
*/
|
||
function collectConfigForm() {
|
||
return {
|
||
key: document.getElementById("config-key").value.trim(),
|
||
idc: document.getElementById("config-idc").value.trim(),
|
||
environment: document.getElementById("config-environment").value.trim(),
|
||
group: document.getElementById("config-group").value.trim(),
|
||
value: document.getElementById("config-value").value,
|
||
type: document.getElementById("config-type").value,
|
||
valueRange: document.getElementById("config-value-range").value.trim(),
|
||
description: document.getElementById("config-description").value.trim(),
|
||
purpose: document.getElementById("config-purpose").value.trim(),
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 保存配置项（新增或更新）
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function saveConfig() {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
const data = collectConfigForm();
|
||
try {
|
||
if (state.editingConfigId) {
|
||
await API.updateConfig(state.currentProject.id, state.editingConfigId, data);
|
||
toast("配置已更新", "success");
|
||
} else {
|
||
await API.createConfig(state.currentProject.id, data);
|
||
toast("配置已新增", "success");
|
||
}
|
||
closeModal("modal-config");
|
||
await selectProject(state.currentProject.id);
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存新建项目
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function saveProject() {
|
||
const data = {
|
||
name: document.getElementById("project-name").value.trim(),
|
||
description: document.getElementById("project-description").value.trim(),
|
||
enableIdc: document.getElementById("project-enable-idc").checked,
|
||
enableEnvironment: document.getElementById("project-enable-env").checked,
|
||
enableGroup: document.getElementById("project-enable-group").checked,
|
||
idcMapping: document.getElementById("project-idc-mapping").value,
|
||
environmentMapping: document.getElementById("project-env-mapping").value,
|
||
groupMapping: document.getElementById("project-group-mapping").value,
|
||
};
|
||
try {
|
||
const project = await API.createProject(data);
|
||
toast("项目已创建", "success");
|
||
closeModal("modal-project");
|
||
await loadProjects();
|
||
document.getElementById("project-selector").value = project.id;
|
||
await selectProject(project.id);
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 打开维度映射配置模态框，回填当前项目映射方式
|
||
* @returns {void}
|
||
*/
|
||
function openMappingModal() {
|
||
const p = state.currentProject;
|
||
if (!p) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
document.getElementById("map-idc-row").style.display = p.enableIdc ? "" : "none";
|
||
document.getElementById("map-env-row").style.display = p.enableEnvironment ? "" : "none";
|
||
document.getElementById("map-group-row").style.display = p.enableGroup ? "" : "none";
|
||
document.getElementById("map-idc-mapping").value = p.idcMapping || "path";
|
||
document.getElementById("map-env-mapping").value = p.environmentMapping || "path";
|
||
document.getElementById("map-group-mapping").value = p.groupMapping || "path";
|
||
openModal("modal-mapping");
|
||
}
|
||
|
||
/**
|
||
* 保存维度映射配置
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function saveMapping() {
|
||
if (!state.currentProject) return;
|
||
const mappings = {
|
||
idcMapping: document.getElementById("map-idc-mapping").value,
|
||
environmentMapping: document.getElementById("map-env-mapping").value,
|
||
groupMapping: document.getElementById("map-group-mapping").value,
|
||
};
|
||
try {
|
||
await API.updateMappings(state.currentProject.id, mappings);
|
||
toast("映射配置已保存", "success");
|
||
closeModal("modal-mapping");
|
||
await selectProject(state.currentProject.id);
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示确认框
|
||
* @param {string} message - 提示信息
|
||
* @param {Function} callback - 确认回调
|
||
* @returns {void}
|
||
*/
|
||
function confirmAction(message, callback) {
|
||
document.getElementById("confirm-message").textContent = message;
|
||
state.confirmCallback = callback;
|
||
openModal("modal-confirm");
|
||
}
|
||
|
||
/**
|
||
* 导出当前项目配置为 JSON 文件
|
||
* @returns {void}
|
||
*/
|
||
function exportConfig() {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
const payload = { project: state.currentProject, configs: state.configs };
|
||
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement("a");
|
||
a.href = url;
|
||
a.download = `${state.currentProject.name}-configs.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
toast("配置已导出", "success");
|
||
}
|
||
|
||
/**
|
||
* 导入配置文件（逐条新增到当前项目）
|
||
* @param {File} file - 用户选择的 JSON 文件
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function importConfig(file) {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
if (state.mode === "readonly") {
|
||
toast("只读模式下不允许导入", "error");
|
||
return;
|
||
}
|
||
try {
|
||
const text = await file.text();
|
||
const payload = JSON.parse(text);
|
||
const configs = payload.configs || [];
|
||
let count = 0;
|
||
for (const cfg of configs) {
|
||
try {
|
||
await API.createConfig(state.currentProject.id, cfg);
|
||
count++;
|
||
} catch {
|
||
// 忽略单条失败，继续导入其余配置
|
||
}
|
||
}
|
||
toast(`成功导入 ${count} 项配置`, "success");
|
||
await selectProject(state.currentProject.id);
|
||
} catch (err) {
|
||
toast("导入失败：" + err.message, "error");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 地址栏跳转：按输入路径定位并选中树节点
|
||
* @returns {void}
|
||
*/
|
||
function navigateToPath() {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
const target = document.getElementById("address-input").value.trim();
|
||
if (target === "" || target === "/") {
|
||
Tree.selectByPath(document.getElementById("tree-content"), "");
|
||
renderConfigTable(getFilteredConfigs(), "/");
|
||
return;
|
||
}
|
||
const ok = Tree.selectByPath(document.getElementById("tree-content"), target);
|
||
if (!ok) {
|
||
toast("未找到该路径：" + target, "error");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 拷贝地址栏路径到剪贴板
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function copyAddress() {
|
||
const text = document.getElementById("address-input").value;
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
toast("路径已拷贝", "success");
|
||
} catch {
|
||
// 剪贴板不可用时退化为选中输入框内容
|
||
document.getElementById("address-input").select();
|
||
toast("请手动复制（Ctrl+C）", "info");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绑定所有事件监听
|
||
* @returns {void}
|
||
*/
|
||
function bindEvents() {
|
||
// 项目选择
|
||
document.getElementById("project-selector").addEventListener("change", (e) => {
|
||
selectProject(e.target.value);
|
||
});
|
||
|
||
// 新建项目
|
||
document.getElementById("btn-new-project").addEventListener("click", () => {
|
||
document.getElementById("project-name").value = "";
|
||
document.getElementById("project-description").value = "";
|
||
document.getElementById("project-enable-idc").checked = true;
|
||
document.getElementById("project-enable-env").checked = true;
|
||
document.getElementById("project-enable-group").checked = true;
|
||
document.getElementById("project-idc-mapping").value = "path";
|
||
document.getElementById("project-env-mapping").value = "path";
|
||
document.getElementById("project-group-mapping").value = "path";
|
||
openModal("modal-project");
|
||
});
|
||
document.getElementById("btn-save-project").addEventListener("click", saveProject);
|
||
|
||
// 删除项目
|
||
document.getElementById("btn-delete-project").addEventListener("click", () => {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
const proj = state.currentProject;
|
||
confirmAction(`确认删除项目 "${proj.name}" 及其全部配置吗？`, async () => {
|
||
try {
|
||
await API.deleteProject(proj.id);
|
||
toast("项目已删除", "success");
|
||
closeModal("modal-confirm");
|
||
await loadProjects();
|
||
await selectProject("");
|
||
document.getElementById("project-selector").value = "";
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
});
|
||
});
|
||
|
||
// 模式切换
|
||
document.querySelectorAll(".mode-btn").forEach((btn) => {
|
||
btn.addEventListener("click", async () => {
|
||
try {
|
||
await API.setMode(btn.dataset.mode);
|
||
state.mode = btn.dataset.mode;
|
||
applyMode();
|
||
toast(`已切换到${MODE_NAMES[state.mode]}模式`, "info");
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
});
|
||
});
|
||
|
||
// 新增配置
|
||
document.getElementById("btn-add-config").addEventListener("click", () => {
|
||
if (!state.currentProject) {
|
||
toast("请先选择项目", "error");
|
||
return;
|
||
}
|
||
if (state.mode === "readonly") {
|
||
toast("只读模式下不允许新增", "error");
|
||
return;
|
||
}
|
||
openConfigModal(null, false);
|
||
});
|
||
document.getElementById("btn-save-config").addEventListener("click", saveConfig);
|
||
|
||
// 维度筛选下拉
|
||
document.getElementById("dim-idc-select").addEventListener("change", (e) => {
|
||
state.dimFilter.idc = e.target.value;
|
||
refreshTree();
|
||
renderConfigTable(getFilteredConfigs(), "/");
|
||
});
|
||
document.getElementById("dim-env-select").addEventListener("change", (e) => {
|
||
state.dimFilter.environment = e.target.value;
|
||
refreshTree();
|
||
renderConfigTable(getFilteredConfigs(), "/");
|
||
});
|
||
document.getElementById("dim-group-select").addEventListener("change", (e) => {
|
||
state.dimFilter.group = e.target.value;
|
||
refreshTree();
|
||
renderConfigTable(getFilteredConfigs(), "/");
|
||
});
|
||
|
||
// 维度映射配置
|
||
document.getElementById("btn-dim-mapping").addEventListener("click", openMappingModal);
|
||
document.getElementById("btn-save-mapping").addEventListener("click", saveMapping);
|
||
|
||
// 地址栏
|
||
document.getElementById("btn-address-go").addEventListener("click", navigateToPath);
|
||
document.getElementById("btn-address-copy").addEventListener("click", copyAddress);
|
||
document.getElementById("address-input").addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") navigateToPath();
|
||
});
|
||
|
||
// 导出/导入
|
||
document.getElementById("btn-export-config").addEventListener("click", exportConfig);
|
||
document.getElementById("btn-import-config").addEventListener("click", () => {
|
||
document.getElementById("import-file-input").click();
|
||
});
|
||
document.getElementById("import-file-input").addEventListener("change", (e) => {
|
||
if (e.target.files[0]) {
|
||
importConfig(e.target.files[0]);
|
||
e.target.value = "";
|
||
}
|
||
});
|
||
|
||
// 表格操作（事件委托）
|
||
document.getElementById("config-tbody").addEventListener("click", (e) => {
|
||
const btn = e.target.closest(".row-btn");
|
||
if (!btn) return;
|
||
const id = btn.dataset.id;
|
||
const action = btn.dataset.action;
|
||
const config = state.configs.find((c) => c.id === id);
|
||
if (!config) return;
|
||
|
||
if (action === "view") {
|
||
openConfigModal(config, true);
|
||
} else if (action === "edit") {
|
||
if (state.mode === "readonly") {
|
||
toast("只读模式下不允许编辑", "error");
|
||
return;
|
||
}
|
||
openConfigModal(config, false);
|
||
} else if (action === "delete") {
|
||
if (state.mode === "readonly") {
|
||
toast("只读模式下不允许删除", "error");
|
||
return;
|
||
}
|
||
confirmAction(`确认删除配置项 "${config.key}" 吗？`, async () => {
|
||
try {
|
||
await API.deleteConfig(state.currentProject.id, id);
|
||
toast("配置已删除", "success");
|
||
closeModal("modal-confirm");
|
||
await selectProject(state.currentProject.id);
|
||
} catch (err) {
|
||
toast(err.message, "error");
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 确认框
|
||
document.getElementById("btn-confirm-ok").addEventListener("click", () => {
|
||
if (state.confirmCallback) state.confirmCallback();
|
||
});
|
||
|
||
// 全部折叠
|
||
document.getElementById("btn-collapse-all").addEventListener("click", () => {
|
||
document.querySelectorAll(".tree-children").forEach((el) => el.classList.add("collapsed"));
|
||
document.querySelectorAll(".tree-toggle").forEach((el) => {
|
||
if (el.textContent === "▼") el.textContent = "▶";
|
||
});
|
||
});
|
||
|
||
// 分隔条拖拽
|
||
bindResizer();
|
||
}
|
||
|
||
/**
|
||
* 绑定左右面板分隔条的拖拽调整宽度功能
|
||
* @returns {void}
|
||
*/
|
||
function bindResizer() {
|
||
const resizer = document.getElementById("resizer");
|
||
const treePanel = document.getElementById("tree-panel");
|
||
let dragging = false;
|
||
|
||
resizer.addEventListener("mousedown", () => {
|
||
dragging = true;
|
||
document.body.style.cursor = "col-resize";
|
||
});
|
||
document.addEventListener("mousemove", (e) => {
|
||
if (!dragging) return;
|
||
const width = Math.max(180, Math.min(600, e.clientX));
|
||
treePanel.style.width = width + "px";
|
||
});
|
||
document.addEventListener("mouseup", () => {
|
||
dragging = false;
|
||
document.body.style.cursor = "";
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 应用初始化入口
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function init() {
|
||
bindEvents();
|
||
try {
|
||
const modeData = await API.getMode();
|
||
state.mode = modeData.mode;
|
||
} catch {
|
||
state.mode = "edit";
|
||
}
|
||
applyMode();
|
||
await loadProjects();
|
||
setStatus("就绪");
|
||
}
|
||
|
||
// 页面加载完成后启动
|
||
window.addEventListener("DOMContentLoaded", init);
|