diff --git a/plugins/addon/theme_configurator/template/admin/index.html b/plugins/addon/theme_configurator/template/admin/index.html index eccca69..ce19efe 100644 --- a/plugins/addon/theme_configurator/template/admin/index.html +++ b/plugins/addon/theme_configurator/template/admin/index.html @@ -48,6 +48,32 @@ 首页内容 + + + + + + + 导航配置 + + + + + + + + + + 其他配置 + + + + + + + + JSON编辑器 + @@ -153,6 +179,90 @@ + + +
+
+
+

顶部导航

+
+
+
+ +
+
+
+
+

底部导航

+
+
+
+ +
+
+
+ + +
+
+
+

友情链接

+
+
+ + +
+
+
+
+

侧边浮窗

+
+
+
+ +
+
+
+
+

反馈类型

+
+
+
+ +
+
+
+
+

合作伙伴

+
+
+
+ +
+
+
+ + +
+
+
+

JSON配置编辑器

+

直接编辑完整JSON配置

+
+
+
+ 使用说明: 点击"同步"按钮将所有表单数据转为JSON,编辑后点击"应用"更新表单 +
+ +
+ + + +
+
+
+
+ @@ -215,6 +325,16 @@ // 渲染荣誉列表 renderHonors(data.honor || []); + + // 渲染导航 + renderHeaderNav(data.header_nav || []); + renderFooterNav(data.footer_nav || []); + + // 渲染其他配置 + renderFriendlyLinks(data.friendly_link || []); + renderSides(data.side || []); + renderFeedbackTypes(data.feedback_type || []); + renderPartners(data.partner || []); } // 获取嵌套属性值 @@ -239,11 +359,15 @@ setNestedValue(data, name, input.value); }); - // 收集轮播数据 + // 收集动态列表数据 data.banner = collectBanners(); - - // 收集荣誉数据 data.honor = collectHonors(); + data.friendly_link = collectFriendlyLinks(); + data.side = collectSides(); + data.feedback_type = collectFeedbackTypes(); + data.partner = collectPartners(); + data.header_nav = collectHeaderNav(); + data.footer_nav = collectFooterNav(); return data; } @@ -376,12 +500,266 @@ renderHonors(honors); }; + // ========== 友情链接 ========== + function renderFriendlyLinks(links) { + const container = document.getElementById('friendlyLinkList'); + container.innerHTML = ''; + links.forEach((link, index) => { + const item = document.createElement('div'); + item.className = 'config-item'; + item.innerHTML = ` +
+

链接 ${index + 1}

+ +
+
+
+
+ + +
+
+ + +
+
+
+ `; + container.appendChild(item); + }); + } + + function collectFriendlyLinks() { + const links = []; + document.querySelectorAll('[data-friendly]').forEach(input => { + const index = parseInt(input.dataset.friendly); + const field = input.dataset.field; + if (!links[index]) links[index] = {}; + links[index][field] = input.value; + }); + return links.filter(l => l); + } + + window.addFriendlyLink = function () { + const links = collectFriendlyLinks(); + links.push({ name: '', url: '' }); + renderFriendlyLinks(links); + }; + + window.removeFriendlyLink = function (index) { + const links = collectFriendlyLinks(); + links.splice(index, 1); + renderFriendlyLinks(links); + }; + + // ========== 侧边浮窗 ========== + function renderSides(sides) { + const container = document.getElementById('sideList'); + container.innerHTML = ''; + sides.forEach((side, index) => { + const item = document.createElement('div'); + item.className = 'config-item'; + item.innerHTML = ` +
+

浮窗 ${index + 1}

+ +
+
+
+
+ + +
+
+ +
+ + +
+
+
+ + +
+
+
+ `; + container.appendChild(item); + }); + } + + function collectSides() { + const sides = []; + document.querySelectorAll('[data-side]').forEach(input => { + const index = parseInt(input.dataset.side); + const field = input.dataset.field; + if (!sides[index]) sides[index] = {}; + sides[index][field] = input.value; + }); + return sides.filter(s => s); + } + + window.addSide = function () { + const sides = collectSides(); + sides.push({ name: '', icon: '', content: '' }); + renderSides(sides); + }; + + window.removeSide = function (index) { + const sides = collectSides(); + sides.splice(index, 1); + renderSides(sides); + }; + + // ========== 反馈类型 ========== + function renderFeedbackTypes(types) { + const container = document.getElementById('feedbackTypeList'); + container.innerHTML = ''; + types.forEach((type, index) => { + const item = document.createElement('div'); + item.className = 'config-item'; + item.innerHTML = ` +
+

类型 ${index + 1}

+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ `; + container.appendChild(item); + }); + } + + function collectFeedbackTypes() { + const types = []; + document.querySelectorAll('[data-feedback]').forEach(input => { + const index = parseInt(input.dataset.feedback); + const field = input.dataset.field; + if (!types[index]) types[index] = {}; + types[index][field] = input.value; + }); + return types.filter(t => t); + } + + window.addFeedbackType = function () { + const types = collectFeedbackTypes(); + types.push({ id: '', name: '', description: '' }); + renderFeedbackTypes(types); + }; + + window.removeFeedbackType = function (index) { + const types = collectFeedbackTypes(); + types.splice(index, 1); + renderFeedbackTypes(types); + }; + + // ========== 合作伙伴 ========== + function renderPartners(partners) { + const container = document.getElementById('partnerList'); + container.innerHTML = ''; + partners.forEach((partner, index) => { + const item = document.createElement('div'); + item.className = 'config-item'; + item.innerHTML = ` +
+

伙伴 ${index + 1}

+ +
+
+
+
+ + +
+
+ +
+ + +
+
+
+ + +
+
+
+ `; + container.appendChild(item); + }); + } + + function collectPartners() { + const partners = []; + document.querySelectorAll('[data-partner]').forEach(input => { + const index = parseInt(input.dataset.partner); + const field = input.dataset.field; + if (!partners[index]) partners[index] = {}; + partners[index][field] = input.value; + }); + return partners.filter(p => p); + } + + window.addPartner = function () { + const partners = collectPartners(); + partners.push({ name: '', img: '', description: '' }); + renderPartners(partners); + }; + + window.removePartner = function (index) { + const partners = collectPartners(); + partners.splice(index, 1); + renderPartners(partners); + }; + + // ========== 顶部导航(简化版) ========== + function renderHeaderNav(navs) { + const container = document.getElementById('headerNavList'); + container.innerHTML = '
顶部导航较复杂,建议使用JSON编辑器编辑
'; + } + + function collectHeaderNav() { + return config.header_nav || []; + } + + window.addHeaderNav = function () { + alert('请使用JSON编辑器编辑顶部导航'); + }; + + // ========== 底部导航(简化版) ========== + function renderFooterNav(navs) { + const container = document.getElementById('footerNavList'); + container.innerHTML = '
底部导航较复杂,建议使用JSON编辑器编辑
'; + } + + function collectFooterNav() { + return config.footer_nav || []; + } + + window.addFooterNav = function () { + alert('请使用JSON编辑器编辑底部导航'); + }; + // 文件上传 document.addEventListener('click', (e) => { if (e.target.closest('.upload-btn')) { e.preventDefault(); const btn = e.target.closest('.upload-btn'); - currentUploadTarget = btn.dataset.target || btn.dataset.targetBanner || btn.dataset.targetHonor; + currentUploadTarget = btn.dataset.target || btn.dataset.targetBanner || btn.dataset.targetHonor || btn.dataset.targetSide || btn.dataset.targetPartner; document.getElementById('fileInput').click(); } }); @@ -455,6 +833,57 @@ // 添加按钮事件 document.getElementById('addBannerBtn').addEventListener('click', addBanner); document.getElementById('addHonorBtn').addEventListener('click', addHonor); + document.getElementById('addFriendlyLinkBtn').addEventListener('click', addFriendlyLink); + document.getElementById('addSideBtn').addEventListener('click', addSide); + document.getElementById('addFeedbackTypeBtn').addEventListener('click', addFeedbackType); + document.getElementById('addPartnerBtn').addEventListener('click', addPartner); + document.getElementById('addHeaderNavBtn').addEventListener('click', addHeaderNav); + document.getElementById('addFooterNavBtn').addEventListener('click', addFooterNav); + + // JSON编辑器功能 + document.getElementById('syncJsonBtn').addEventListener('click', () => { + const data = collectFormData(); + document.getElementById('jsonEditor').value = JSON.stringify(data, null, 2); + alert('✓ 已同步当前配置到JSON编辑器'); + }); + + document.getElementById('applyJsonBtn').addEventListener('click', () => { + const jsonText = document.getElementById('jsonEditor').value.trim(); + if (!jsonText) { + alert('⚠ JSON内容为空'); + return; + } + + try { + const data = JSON.parse(jsonText); + config = data; + fillForm(data); + alert('✓ JSON已应用到表单,请切换到其他Tab查看'); + } catch (err) { + alert('✗ JSON解析失败:\n' + err.message); + } + }); + + document.getElementById('copyJsonBtn').addEventListener('click', () => { + const jsonText = document.getElementById('jsonEditor').value; + if (!jsonText) { + alert('⚠ JSON内容为空'); + return; + } + + navigator.clipboard.writeText(jsonText).then(() => { + alert('✓ JSON已复制到剪贴板'); + }).catch(err => { + // 兼容方案 + const textarea = document.createElement('textarea'); + textarea.value = jsonText; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + document.body.removeChild(textarea); + alert('✓ JSON已复制到剪贴板'); + }); + }); // 初始化 loadConfig(); diff --git a/plugins/addon/theme_configurator/template/admin/index.html.before-complete b/plugins/addon/theme_configurator/template/admin/index.html.before-complete new file mode 100644 index 0000000..28b509e --- /dev/null +++ b/plugins/addon/theme_configurator/template/admin/index.html.before-complete @@ -0,0 +1,533 @@ + + +
+ +
+ + +
+ + + + + +
+ +
+
+
+

企业信息

+

配置企业基础联系信息

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
建议尺寸: 200×60 像素
+
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+

SEO设置

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+

首页轮播

+
+
+
+ +
+
+ +
+
+

企业荣誉

+
+
+
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/plugins/addon/theme_configurator/template/admin/theme.css b/plugins/addon/theme_configurator/template/admin/theme.css index ba9b3c4..66a3f17 100644 --- a/plugins/addon/theme_configurator/template/admin/theme.css +++ b/plugins/addon/theme_configurator/template/admin/theme.css @@ -311,6 +311,47 @@ textarea.form-control { padding: 16px; } +/* JSON编辑器 */ +.json-editor { + width: 100%; + font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important; + font-size: 13px !important; + line-height: 1.6 !important; + padding: 16px !important; + background: #1e1e1e !important; + color: #d4d4d4 !important; + border: 1px solid #3c3c3c !important; + border-radius: 6px !important; + resize: vertical; + min-height: 400px; +} + +.json-editor:focus { + outline: none; + border-color: var(--primary) !important; + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important; +} + +.alert { + padding: 12px 16px; + border-radius: 6px; + border-left: 3px solid var(--primary); + background: rgba(24, 144, 255, 0.08); + font-size: 13px; + line-height: 1.6; +} + +.alert-info { + border-left-color: var(--primary); + background: rgba(24, 144, 255, 0.08); + color: var(--text-secondary); +} + +.alert ul { + font-size: 13px; + line-height: 1.8; +} + /* 响应式 */ @media (max-width: 768px) { .admin-container {