修复插件

plugins/addon/theme_configurator/template/admin/index.html

@@ -180,32 +180,55 @@
       </div>
     </section>
 
-    <!-- 导航配置 -->
+        <!-- 导航配置 -->
     <section id="tab-nav" class="config-section">
       <div class="section-card">
         <div class="section-header">
-          <h2>导航配置</h2>
-          <p class="section-desc">顶部和底部导航较复杂,建议使用JSON编辑器编辑</p>
+          <h2>顶部导航</h2>
         </div>
         <div class="section-body">
-          <div class="alert alert-info">
-            由于导航结构包含多级嵌套,建议切换到"JSON编辑器"Tab进行编辑
-          </div>
+          <div id="headerNavList"></div>
+          <button class="btn btn-secondary" id="addHeaderNavBtn">+ 添加导航</button>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-header">
+          <h2>底部导航</h2>
+        </div>
+        <div class="section-body">
+          <div id="footerNavList"></div>
+          <button class="btn btn-secondary" id="addFooterNavBtn">+ 添加栏目</button>
         </div>
       </div>
     </section>
 
-    <!-- 其他配置 -->
+        <!-- 其他配置 -->
     <section id="tab-other" class="config-section">
       <div class="section-card">
         <div class="section-header">
-          <h2>其他配置</h2>
-          <p class="section-desc">友情链接、反馈类型等其他配置项</p>
+          <h2>友情链接</h2>
         </div>
         <div class="section-body">
-          <div class="alert alert-info">
-            这些配置项建议使用JSON编辑器编辑,格式请参考完整JSON数据
-          </div>
+          <div id="friendlyLinkList"></div>
+          <button class="btn btn-secondary" id="addFriendlyLinkBtn">+ 添加</button>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-header">
+          <h2>侧边浮窗</h2>
+        </div>
+        <div class="section-body">
+          <div id="sideList"></div>
+          <button class="btn btn-secondary" id="addSideBtn">+ 添加</button>
+        </div>
+      </div>
+      <div class="section-card">
+        <div class="section-header">
+          <h2>反馈类型</h2>
+        </div>
+        <div class="section-body">
+          <div id="feedbackTypeList"></div>
+          <button class="btn btn-secondary" id="addFeedbackTypeBtn">+ 添加</button>
         </div>
       </div>
     </section>
@@ -293,6 +316,15 @@
 
       // 渲染荣誉列表
       renderHonors(data.honor || []);
+      
+      // 渲染导航
+      renderHeaderNav(data.header_nav || []);
+      renderFooterNav(data.footer_nav || []);
+      
+      // 渲染其他配置
+      renderFriendlyLinks(data.friendly_link || []);
+      renderSides(data.side || []);
+      renderFeedbackTypes(data.feedback_type || []);
     }
 
     // 获取嵌套属性值
@@ -322,6 +354,11 @@
 
       // 收集荣誉数据
       data.honor = collectHonors();
+      data.friendly_link = collectFriendlyLinks();
+      data.side = collectSides();
+      data.feedback_type = collectFeedbackTypes();
+      data.header_nav = collectHeaderNav();
+      data.footer_nav = collectFooterNav();
 
       return data;
     }
@@ -454,12 +491,302 @@
       renderHonors(honors);
     };
 
+    // ========== 友情链接 ==========
+    function renderFriendlyLinks(links) {
+      const container = document.getElementById('friendlyLinkList');
+      if(!container) return;
+      container.innerHTML = '';
+      links.forEach((link, index) => {
+        const item = document.createElement('div');
+        item.className = 'config-item';
+        item.innerHTML = `
+          <div class="config-item__header">
+            <h4>链接 ${index + 1}</h4>
+            <button class="btn-icon btn-icon-danger" onclick="removeFriendlyLink(${index})">×</button>
+          </div>
+          <div class="config-item__body">
+            <div class="form-fields">
+              <div class="form-item">
+                <label>名称</label>
+                <input type="text" class="form-control" data-friendly="${index}" data-field="name" value="${link.name || ''}" placeholder="网站名称">
+              </div>
+              <div class="form-item">
+                <label>链接地址</label>
+                <input type="text" class="form-control" data-friendly="${index}" data-field="url" value="${link.url || ''}" placeholder="https://example.com">
+              </div>
+            </div>
+          </div>
+        `;
+        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');
+      if(!container) return;
+      container.innerHTML = '';
+      sides.forEach((side, index) => {
+        const item = document.createElement('div');
+        item.className = 'config-item';
+        item.innerHTML = `
+          <div class="config-item__header">
+            <h4>浮窗 ${index + 1}</h4>
+            <button class="btn-icon btn-icon-danger" onclick="removeSide(${index})">×</button>
+          </div>
+          <div class="config-item__body">
+            <div class="form-fields">
+              <div class="form-item">
+                <label>名称</label>
+                <input type="text" class="form-control" data-side="${index}" data-field="name" value="${side.name || ''}" placeholder="电话咨询">
+              </div>
+              <div class="form-item">
+                <label>图标地址</label>
+                <div class="upload-control">
+                  <input type="text" class="form-control" data-side="${index}" data-field="icon" value="${side.icon || ''}" placeholder="/upload/icon.png">
+                  <button class="btn btn-secondary upload-btn" data-target-side="${index}.icon">选择文件</button>
+                </div>
+              </div>
+              <div class="form-item">
+                <label>内容HTML</label>
+                <textarea class="form-control" data-side="${index}" data-field="content" rows="2" placeholder="HTML内容">${side.content || ''}</textarea>
+              </div>
+            </div>
+          </div>
+        `;
+        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');
+      if(!container) return;
+      container.innerHTML = '';
+      types.forEach((type, index) => {
+        const item = document.createElement('div');
+        item.className = 'config-item';
+        item.innerHTML = `
+          <div class="config-item__header">
+            <h4>类型 ${index + 1}</h4>
+            <button class="btn-icon btn-icon-danger" onclick="removeFeedbackType(${index})">×</button>
+          </div>
+          <div class="config-item__body">
+            <div class="form-fields">
+              <div class="form-item">
+                <label>ID</label>
+                <input type="text" class="form-control" data-feedback="${index}" data-field="id" value="${type.id || ''}" placeholder="1">
+              </div>
+              <div class="form-item">
+                <label>名称</label>
+                <input type="text" class="form-control" data-feedback="${index}" data-field="name" value="${type.name || ''}" placeholder="产品建议">
+              </div>
+              <div class="form-item">
+                <label>描述</label>
+                <input type="text" class="form-control" data-feedback="${index}" data-field="description" value="${type.description || ''}" placeholder="用于产品体验反馈">
+              </div>
+            </div>
+          </div>
+        `;
+        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 renderHeaderNav(navs) {
+      const container = document.getElementById('headerNavList');
+      if(!container) return;
+      container.innerHTML = '';
+      navs.forEach((nav, index) => {
+        const item = document.createElement('div');
+        item.className = 'config-item';
+        item.innerHTML = `
+          <div class="config-item__header">
+            <h4>导航 ${index + 1}</h4>
+            <button class="btn-icon btn-icon-danger" onclick="removeHeaderNav(${index})">×</button>
+          </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 || ''}">
+              </div>
+              <div class="form-item">
+                <div style="font-size:13px;color:#666;">子菜单请使用JSON编辑器配置</div>
+              </div>
+            </div>
+          </div>
+        `;
+        container.appendChild(item);
+      });
+    }
+
+    function collectHeaderNav() {
+      const navs = [];
+      document.querySelectorAll('[data-hnav]').forEach(input => {
+        const index = parseInt(input.dataset.hnav);
+        const field = input.dataset.field;
+        if (!navs[index]) navs[index] = { children: [] };
+        navs[index][field] = input.value;
+      });
+      // 保留原有的children
+      const orig = config.header_nav || [];
+      navs.forEach((nav, i) => {
+        if(orig[i] && orig[i].children) {
+          nav.children = orig[i].children;
+        }
+      });
+      return navs.filter(n => n);
+    }
+
+    window.addHeaderNav = function() {
+      const navs = collectHeaderNav();
+      navs.push({ name: '', file_address: '', children: [] });
+      renderHeaderNav(navs);
+    };
+
+    window.removeHeaderNav = function(index) {
+      const navs = collectHeaderNav();
+      navs.splice(index, 1);
+      renderHeaderNav(navs);
+    };
+
+    // ========== 底部导航(简化) ==========
+    function renderFooterNav(navs) {
+      const container = document.getElementById('footerNavList');
+      if(!container) return;
+      container.innerHTML = '';
+      navs.forEach((col, index) => {
+        const item = document.createElement('div');
+        item.className = 'config-item';
+        item.innerHTML = `
+          <div class="config-item__header">
+            <h4>栏目 ${index + 1}</h4>
+            <button class="btn-icon btn-icon-danger" onclick="removeFooterNav(${index})">×</button>
+          </div>
+          <div class="config-item__body">
+            <div class="form-item">
+              <label>栏目名称</label>
+              <input type="text" class="form-control" data-fnav="${index}" data-field="name" value="${col.name || ''}" placeholder="热门云产品">
+            </div>
+            <div class="form-item">
+              <div style="font-size:13px;color:#666;">链接列表请使用JSON编辑器配置</div>
+            </div>
+          </div>
+        `;
+        container.appendChild(item);
+      });
+    }
+
+    function collectFooterNav() {
+      const navs = [];
+      document.querySelectorAll('[data-fnav]').forEach(input => {
+        const index = parseInt(input.dataset.fnav);
+        if (!navs[index]) navs[index] = { children: [] };
+        navs[index][input.dataset.field] = input.value;
+      });
+      // 保留原有的children
+      const orig = config.footer_nav || [];
+      navs.forEach((nav, i) => {
+        if(orig[i] && orig[i].children) {
+          nav.children = orig[i].children;
+        }
+      });
+      return navs.filter(n => n);
+    }
+
+    window.addFooterNav = function() {
+      const navs = collectFooterNav();
+      navs.push({ name: '', children: [] });
+      renderFooterNav(navs);
+    };
+
+    window.removeFooterNav = function(index) {
+      const navs = collectFooterNav();
+      navs.splice(index, 1);
+      renderFooterNav(navs);
+    };
+
+
     // 文件上传
     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;
         document.getElementById('fileInput').click();
       }
     });
@@ -517,11 +844,16 @@
 
       const data = collectFormData();
 
+      console.log('保存的数据:', data); // 调试日志
+
       axios.post(apiBase, data, {
         headers: { Authorization: `Bearer ${token}` }
       }).then(res => {
         alert(res.data.msg || '保存成功');
-        loadConfig(); // 重新加载
+        // 使用服务器返回的数据更新config
+        config = res.data.data || data;
+        // 重新渲染界面
+        fillForm(config);
       }).catch(err => {
         alert('保存失败: ' + (err.response?.data?.msg || err.message));
       }).finally(() => {
@@ -533,6 +865,11 @@
     // 添加按钮事件
     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('addHeaderNavBtn').addEventListener('click', addHeaderNav);
+    document.getElementById('addFooterNavBtn').addEventListener('click', addFooterNav);
 
     // JSON编辑器功能
     document.getElementById('syncJsonBtn').addEventListener('click', () => {