yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

三级菜单UI
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2026-01-11 12:10:08 +08:00
parent c1036a3d14
commit 0edd3f5632
1 changed files with 167 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
plugins/addon/theme_configurator/template/admin/index.html
View File

@@ -672,124 +672,133 @@
function renderHeaderNav(navs) {
const container = document.getElementById('headerNavList');
if (!container) return;
container.innerHTML = '';
navs.forEach((nav, index) => {
const hasChildren = Array.isArray(nav.children) && nav.children.length > 0;
const item = document.createElement('div');
item.className = 'config-item';
item.style.borderLeft = '3px solid #52c41a'; // 绿色标识
item.innerHTML = `
<div class="config-item__header" style="background:#f6ffed;">
<h4 style="color:#52c41a;">导航 ${index + 1}: ${nav.name || '(未命名)'}</h4>
<div style="display: flex; gap: 4px;">
<button class="btn btn-success btn-sm" id="toggle-nav-${index}" onclick="toggleHeaderNavChildren(${index})" style="font-size:12px;">${hasChildren && nav.children.length > 0 ? '收起子菜单' : '展开子菜单'}</button>
<button class="btn-icon btn-icon-danger" onclick="removeHeaderNav(${index})">×</button>
</div>
</div>
<div class="config-item__body">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<input type="text" class="form-control" data-hnav="${index}" data-field="name" value="${nav.name || ''}" placeholder="产品中心">
</div>
<div class="form-item">
<label>链接</label>
<input type="text" class="form-control" data-hnav="${index}" data-field="file_address" value="${nav.file_address || ''}" placeholder="/products.html">
</div>
</div>
<div id="header-nav-children-${index}" style="display:${hasChildren ? 'block' : 'none'}; margin-top:12px; padding-top:12px; border-top:1px solid #eee;">
<h5 style="margin:0 0 8px; font-size:13px;">子菜单</h5>
<div id="header-nav-children-list-${index}"></div>
<button class="btn btn-secondary btn-sm" onclick="addHeaderNavChild(${index})" style="margin-top:8px;">+ 添加子菜单</button>
</div>
</div>
`;
container.appendChild(item);
if (hasChildren) {
renderHeaderNavChildren(index, nav.children);
let html = `
<table class="nav-config-table" style="width:100%; border-collapse:collapse; font-size:12px;">
<thead>
<tr style="background:#f5f5f5;">
<th style="width:40px; padding:8px; border:1px solid #e0e0e0;">级</th>
<th style="width:180px; padding:8px; border:1px solid #e0e0e0;">名称</th>
<th style="width:180px; padding:8px; border:1px solid #e0e0e0;">链接</th>
<th style="width:140px; padding:8px; border:1px solid #e0e0e0;">图标/地区</th>
<th style="width:120px; padding:8px; border:1px solid #e0e0e0;">描述</th>
<th style="width:60px; padding:8px; border:1px solid #e0e0e0;">选项</th>
<th style="width:100px; padding:8px; border:1px solid #e0e0e0;">操作</th>
</tr>
</thead>
<tbody id="nav-tbody">
`;
navs.forEach((nav, navIndex) => {
// 一级导航行
html += `
<tr style="background:#fafafa; border-left:3px solid #52c41a;">
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<span style="display:inline-block; padding:2px 6px; background:#52c41a; color:#fff; border-radius:3px; font-size:10px;">1级</span>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav="${navIndex}" data-field="name" value="${nav.name || ''}" placeholder="导航名称" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:12px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav="${navIndex}" data-field="file_address" value="${nav.file_address || ''}" placeholder="链接(可选)" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:12px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8; text-align:center;">-</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8; text-align:center;">-</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<label style="font-size:11px; margin:0;"><input type="checkbox" data-hnav="${navIndex}" data-field="blank" ${nav.blank ? 'checked' : ''}> 新窗口</label>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<button onclick="toggleNavChildren(${navIndex})" style="padding:2px 8px; background:#52c41a; color:#fff; border:none; border-radius:2px; font-size:11px; cursor:pointer; margin-right:4px;">+子</button>
<button onclick="removeHeaderNav(${navIndex})" style="padding:2px 8px; background:#ff4d4f; color:#fff; border:none; border-radius:2px; font-size:11px; cursor:pointer;">删</button>
</td>
</tr>
`;
// 二级菜单（默认隐藏）
if (nav.children && nav.children.length > 0) {
nav.children.forEach((child, childIndex) => {
html += `
<tr id="nav-child-${navIndex}-${childIndex}" style="display:none; background:#f0f7ff; border-left:3px solid #1890ff;">
<td style="padding:6px 8px 6px 32px; border:1px solid #e8e8e8;">
<span style="display:inline-block; padding:2px 6px; background:#1890ff; color:#fff; border-radius:3px; font-size:10px;">2级</span>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-child="${navIndex}.${childIndex}" data-field="name" value="${child.name || ''}" placeholder="二级名称" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:12px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-child="${navIndex}.${childIndex}" data-field="file_address" value="${child.file_address || ''}" placeholder="链接(可选)" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:12px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-child="${navIndex}.${childIndex}" data-field="icon" value="${child.icon || ''}" placeholder="图标URL" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-child="${navIndex}.${childIndex}" data-field="description" value="${child.description || ''}" placeholder="描述" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<label style="font-size:11px; margin:0;"><input type="checkbox" data-hnav-child="${navIndex}.${childIndex}" data-field="blank" ${child.blank ? 'checked' : ''}> 新窗口</label>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<button onclick="toggleThirdLevel(${navIndex}, ${childIndex})" style="padding:2px 8px; background:#1890ff; color:#fff; border:none; border-radius:2px; font-size:11px; cursor:pointer; margin-right:4px;">+三</button>
<button onclick="removeHeaderNavChild(${navIndex}, ${childIndex})" style="padding:2px 8px; background:#ff4d4f; color:#fff; border:none; border-radius:2px; font-size:11px; cursor:pointer;">删</button>
</td>
</tr>
`;
// 三级菜单（默认隐藏）
if (child.children && child.children.length > 0) {
child.children.forEach((grandChild, grandIndex) => {
const countryOptions = getCountryOptions();
const selectedCountry = grandChild.country_code || '';
html += `
<tr id="nav-grandchild-${navIndex}-${childIndex}-${grandIndex}" style="display:none; background:#fff7e6; border-left:3px solid #fa8c16;">
<td style="padding:6px 8px 6px 56px; border:1px solid #e8e8e8;">
<span style="display:inline-block; padding:2px 6px; background:#fa8c16; color:#fff; border-radius:3px; font-size:10px;">3级</span>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="name" value="${grandChild.name || ''}" placeholder="三级名称" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="file_address" value="${grandChild.file_address || ''}" placeholder="链接" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<select data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="country_code" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
<option value="">无地区</option>
${countryOptions.map(code => `<option value="${code}" ${selectedCountry === code ? 'selected' : ''}>${code}</option>`).join('')}
</select>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<input type="text" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="description" value="${grandChild.description || ''}" placeholder="描述" style="width:100%; padding:4px; border:1px solid #d9d9d9; font-size:11px;">
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<label style="font-size:11px; margin:0;"><input type="checkbox" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="blank" ${grandChild.blank ? 'checked' : ''}> 新窗口</label>
</td>
<td style="padding:6px 8px; border:1px solid #e8e8e8;">
<button onclick="removeThirdLevelItem(${navIndex}, ${childIndex}, ${grandIndex})" style="padding:2px 8px; background:#ff4d4f; color:#fff; border:none; border-radius:2px; font-size:11px; cursor:pointer;">删</button>
</td>
</tr>
`;
});
}
});
}
});
html += `
</tbody>
</table>
<button onclick="addHeaderNav()" style="margin-top:12px; padding:6px 16px; background:#52c41a; color:#fff; border:none; border-radius:3px; cursor:pointer;">+ 添加一级导航</button>
`;
container.innerHTML = html;
}
function renderHeaderNavChildren(navIndex, children) {
const container = document.getElementById(`header-nav-children-list-${navIndex}`);
if (!container) return;
container.innerHTML = '';
children.forEach((child, childIndex) => {
const hasGrandChildren = Array.isArray(child.children) && child.children.length > 0;
const item = document.createElement('div');
item.style.cssText = 'padding:12px; margin-bottom:12px; background:#f9f9f9; border-radius:4px; border-left:3px solid #1890ff;';
item.innerHTML = `
<div style="margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
<strong style="color:#1890ff;">二级菜单 ${childIndex + 1}</strong>
<div style="display:flex; gap:4px;">
<button class="btn btn-info btn-sm" onclick="toggleThirdLevel(${navIndex}, ${childIndex})" style="font-size:11px;">
${hasGrandChildren ? '收起三级' : '展开三级'}
</button>
<button class="btn-icon btn-icon-danger btn-sm" onclick="removeHeaderNavChild(${navIndex}, ${childIndex})">×</button>
</div>
</div>
<div style="display:grid; gap:8px;">
<input type="text" class="form-control" data-hnav-child="${navIndex}.${childIndex}" data-field="name" value="${child.name || ''}" placeholder="二级菜单名称（如：SAS轻量云服务器）">
<input type="text" class="form-control" data-hnav-child="${navIndex}.${childIndex}" data-field="file_address" value="${child.file_address || ''}" placeholder="链接地址（可选）">
<input type="text" class="form-control" data-hnav-child="${navIndex}.${childIndex}" data-field="icon" value="${child.icon || ''}" placeholder="图标URL（可选）">
<input type="text" class="form-control" data-hnav-child="${navIndex}.${childIndex}" data-field="description" value="${child.description || ''}" placeholder="描述文字（如：高性能SSD云服务器）">
<label style="font-size:12px;"><input type="checkbox" data-hnav-child="${navIndex}.${childIndex}" data-field="blank" ${child.blank ? 'checked' : ''}> 新窗口打开</label>
</div>
<div id="third-level-${navIndex}-${childIndex}" style="display:${hasGrandChildren ? 'block' : 'none'}; margin-top:12px; padding:12px; background:#fff; border-radius:4px; border:1px dashed #d9d9d9;">
<h6 style="margin:0 0 8px; font-size:12px; color:#666;">三级菜单</h6>
<div id="third-level-list-${navIndex}-${childIndex}"></div>
<button class="btn btn-secondary btn-sm" onclick="addThirdLevelItem(${navIndex}, ${childIndex})" style="margin-top:8px; font-size:11px;">+ 添加三级菜单</button>
</div>
`;
container.appendChild(item);
// 渲染三级菜单
if (hasGrandChildren) {
renderThirdLevel(navIndex, childIndex, child.children);
}
});
// 改为表格渲染，此函数已废弃
}
// 渲染三级菜单
// 渲染三级菜单 - 已废弃
function renderThirdLevel(navIndex, childIndex, grandChildren) {
const container = document.getElementById(`third-level-list-${navIndex}-${childIndex}`);
if (!container) return;
container.innerHTML = '';
grandChildren.forEach((grandChild, grandIndex) => {
const item = document.createElement('div');
item.style.cssText = 'padding:8px; margin-bottom:6px; margin-left:24px; background:#fff7e6; border-radius:3px; border-left:3px solid #fa8c16;';
// 生成地区选项（只使用方形图标，排除-y后缀的圆形图标）
const countryOptions = getCountryOptions();
const selectedCountry = grandChild.country_code || '';
const countrySelectHTML = `
<select class="form-control form-control-sm" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="country_code" style="font-size:12px;">
<option value="">无地区标识</option>
${countryOptions.map(code => `<option value="${code}" ${selectedCountry === code ? 'selected' : ''}>${code}</option>`).join('')}
</select>
`;
item.innerHTML = `
<div style="display:flex; gap:6px; align-items:start;">
<span style="color:#fa8c16; font-weight:600; font-size:11px;">🏷️ 三级</span>
<div style="flex:1; display:grid; gap:6px;">
<input type="text" class="form-control form-control-sm" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="name" value="${grandChild.name || ''}" placeholder="三级菜单名称（如：香港SAS）" style="font-size:12px;">
<input type="text" class="form-control form-control-sm" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="file_address" value="${grandChild.file_address || ''}" placeholder="链接地址" style="font-size:12px;">
<input type="text" class="form-control form-control-sm" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="description" value="${grandChild.description || ''}" placeholder="描述（可选）" style="font-size:12px;">
<div style="display:flex; gap:8px; align-items:center;">
<label style="font-size:11px; margin:0;"><input type="checkbox" data-hnav-grandchild="${navIndex}.${childIndex}.${grandIndex}" data-field="blank" ${grandChild.blank ? 'checked' : ''}> 新窗口</label>
<div style="flex:1;">${countrySelectHTML}</div>
</div>
</div>
<button class="btn-icon btn-icon-danger btn-sm" onclick="removeThirdLevelItem(${navIndex}, ${childIndex}, ${grandIndex})" style="font-size:11px;">×</button>
</div>
`;
container.appendChild(item);
});
//改为表格渲染，此函数已废弃
}
// 获取国家/地区代码列表（只使用方形图标）
@@ -804,15 +813,56 @@
];
}
// 切换三级菜单显示
window.toggleThirdLevel = function (navIndex, childIndex) {
const container = document.getElementById(`third-level-${navIndex}-${childIndex}`);
const btn = event.target;
if (container) {
const isHidden = container.style.display === 'none';
container.style.display = isHidden ? 'block' : 'none';
btn.textContent = isHidden ? '收起三级' : '展开三级';
// 展开/收起一级导航的子菜单
window.toggleNavChildren = function (navIndex) {
const navs = collectHeaderNav();
const nav = navs[navIndex];
if (!nav || !nav.children || nav.children.length === 0) {
// 没有子菜单，添加子菜单
addHeaderNavChild(navIndex);
return;
}
// 切换子菜单显示状态
nav.children.forEach((child, childIndex) => {
const row = document.getElementById(`nav-child-${navIndex}-${childIndex}`);
if (row) {
const isHidden = row.style.display === 'none';
row.style.display = isHidden ? 'table-row' : 'none';
// 如果收起，同时收起三级菜单
if (!isHidden && child.children) {
child.children.forEach((_, grandIndex) => {
const grandRow = document.getElementById(`nav-grandchild-${navIndex}-${childIndex}-${grandIndex}`);
if (grandRow) grandRow.style.display = 'none';
});
}
}
});
};
// 展开/收起三级菜单
window.toggleThirdLevel = function (navIndex, childIndex) {
const navs = collectHeaderNav();
const child = navs[navIndex]?.children?.[childIndex];
if (!child || !child.children || child.children.length === 0) {
// 没有三级菜单，添加三级菜单
addThirdLevelItem(navIndex, childIndex);
return;
}
// 切换三级菜单显示状态
child.children.forEach((_, grandIndex) => {
const row = document.getElementById(`nav-grandchild-${navIndex}-${childIndex}-${grandIndex}`);
if (row) {
row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
}
});
};
// 切换三级菜单显示（旧函数保留兼容）
window.toggleHeaderNavChildren = function (navIndex) {
toggleNavChildren(navIndex);
};
// 添加三级菜单项