综述: 优化平台端web权限管理页面的iframe嵌入功能

- 修改权限编辑菜单项的链接方式，从hash路由改为相对路径引用
- 新增openTabWithIframe函数，用于通过iframe方式加载子页面
- 优化菜单项点击事件处理逻辑，支持默认链接跳转行为
- 为iframe标签页添加基础样式支持

平台端web/index.html

@@ -448,7 +448,7 @@
                             </span>
                         </button>
                         <div class="submenu">
-                            <a href="#/permission/list" class="submenu-item" onclick="openTab(this, '权限编辑')">权限编辑</a>
+                            <a href="./权限管理/权限编辑.html" class="submenu-item" onclick="openTabWithIframe(this, '权限编辑')">权限编辑</a>
                             <a href="#/permission/manager" class="submenu-item" onclick="openTab(this, '市场经营者创建')">市场经营者创建</a>
                         </div>
                     </li>
@@ -670,6 +670,46 @@
             setActiveTab(tabId, title);
         }
 
+        // 通过iframe打开标签页
+        function openTabWithIframe(link, title) {
+            const tabId = title.toLowerCase().replace(/\s+/g, '-');
+            
+            // 检查标签页是否已存在
+            const existingTab = document.querySelector(`[data-tab="${tabId}"]`);
+            if (existingTab) {
+                // 激活已存在的标签页
+                setActiveTab(tabId, title);
+                return;
+            }
+
+            // 创建新标签页
+            const tabsContainer = document.querySelector('.tabs-container');
+            const newTab = document.createElement('div');
+            newTab.className = 'tab-item';
+            newTab.setAttribute('data-tab', tabId);
+            newTab.innerHTML = `
+                <span class="tab-title">${title}</span>
+                <span class="tab-close" onclick="closeTab(this)">×</span>
+            `;
+            newTab.onclick = () => setActiveTab(tabId, title);
+            tabsContainer.appendChild(newTab);
+
+            // 创建新内容区域，使用iframe嵌入页面
+            const contentArea = document.querySelector('.content-container');
+            const newContent = document.createElement('div');
+            newContent.id = `tab-content-${tabId}`;
+            newContent.className = 'tab-content';
+            newContent.style.display = 'none';
+            newContent.innerHTML = `
+                <h2>${title}</h2>
+                <iframe src="${link.href}" style="width: 100%; height: 600px; border: none;"></iframe>
+            `;
+            contentArea.appendChild(newContent);
+
+            // 激活新标签页
+            setActiveTab(tabId, title);
+        }
+
         // 设置活动标签页
         function setActiveTab(tabId, title) {
             // 移除所有标签页的活动状态
@@ -739,23 +779,24 @@
         // 菜单项点击事件处理
         document.querySelectorAll('.submenu-item').forEach(item => {
             item.addEventListener('click', function(e) {
-                e.preventDefault();
+                // 如果有onclick属性，阻止默认行为并执行onclick
-                
-                // 移除其他菜单项的激活状态
-                document.querySelectorAll('.submenu-item.active').forEach(activeItem => {
-                    activeItem.classList.remove('active');
-                });
-                
-                // 激活当前菜单项
-                this.classList.add('active');
-                
-                // 如果有onclick属性，执行它
                 if (this.onclick) {
+                    e.preventDefault();
+                    
+                    // 移除其他菜单项的激活状态
+                    document.querySelectorAll('.submenu-item.active').forEach(activeItem => {
+                        activeItem.classList.remove('active');
+                    });
+                    
+                    // 激活当前菜单项
+                    this.classList.add('active');
+                    
                     const title = this.textContent;
                     this.onclick.call(this);
                     // 更新面包屑导航
                     updateBreadcrumb(title);
                 }
+                // 如果没有onclick属性，允许默认行为（链接跳转）
             });
         });