From 0edd3f5632521660357a7bffacac771ba703c103 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sun, 11 Jan 2026 12:10:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=89=E7=BA=A7=E8=8F=9C=E5=8D=95UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template/admin/index.html | 284 ++++++++++-------- 1 file changed, 167 insertions(+), 117 deletions(-) diff --git a/plugins/addon/theme_configurator/template/admin/index.html b/plugins/addon/theme_configurator/template/admin/index.html index 9292484..73257ec 100644 --- a/plugins/addon/theme_configurator/template/admin/index.html +++ b/plugins/addon/theme_configurator/template/admin/index.html @@ -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 = ` -
-

导航 ${index + 1}: ${nav.name || '(未命名)'}

-
- - -
-
-
-
-
- - -
-
- - -
-
-
-
子菜单
-
- -
-
- `; - container.appendChild(item); - if (hasChildren) { - renderHeaderNavChildren(index, nav.children); + let html = ` + + + + + + + + + + + + + + `; + + navs.forEach((nav, navIndex) => { + // 一级导航行 + html += ` + + + + + + + + + + `; + + // 二级菜单（默认隐藏） + if (nav.children && nav.children.length > 0) { + nav.children.forEach((child, childIndex) => { + html += ` + + + + + + + + + + `; + + // 三级菜单（默认隐藏） + if (child.children && child.children.length > 0) { + child.children.forEach((grandChild, grandIndex) => { + const countryOptions = getCountryOptions(); + const selectedCountry = grandChild.country_code || ''; + html += ` + + + + + + + + + + `; + }); + } + }); } }); + + html += ` + +
级名称链接图标/地区描述选项操作
+ 1级 + + + + + -- + + + + +
+ + `; + + 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 = ` -
- 二级菜单 ${childIndex + 1} -
- - -
-
-
- - - - - -
-
-
三级菜单
-
- -
- `; - 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 = ` - - `; - - item.innerHTML = ` -
- 🏷️ 三级 -
- - - -
- -
${countrySelectHTML}
-
-
- -
- `; - 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); }; // 添加三级菜单项