综述: 优化iframe内容加载和页面高度适配功能

商家端web/index.html

@@ -192,9 +192,14 @@
         .main-content {
             margin-left: 220px;
             margin-top: 50px;
-            min-height: calc(100vh - 50px);
+            height: calc(100vh - 50px);
             background-color: white;
             padding: 20px;
+            position: relative;
+        }
+        
+        .content-placeholder, #contentFrame {
+            height: 100%;
         }
 
         .content-placeholder {
@@ -291,7 +296,7 @@
                     </span>
                 </div>
                 <div class="submenu">
-                    <a href="#" class="submenu-link">
+                    <a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/账号权限分配.html')">
                         <span class="submenu-icon"></span>
                         账号权限分配
                     </a>
@@ -435,14 +440,12 @@
 
     <!-- 主内容区域 -->
     <main class="main-content">
-        <div class="breadcrumb">
+        <div class="content-placeholder" id="contentPlaceholder">
-            当前位置：首页
-        </div>
-        
-        <div class="content-placeholder">
             <h2>欢迎使用大妈集市商户端管理系统</h2>
             <p style="margin-top: 20px; color: #666;">此区域用于显示具体的页面内容</p>
         </div>
+        
+        <iframe id="contentFrame" style="width: 100%; height: 100%; border: none; display: none;"></iframe>
     </main>
 
     <script>
@@ -458,6 +461,39 @@
             menuItem.classList.toggle('expanded');
         }
 
+        // 加载内容到iframe
+        function loadContent(url) {
+            const contentPlaceholder = document.getElementById('contentPlaceholder');
+            const contentFrame = document.getElementById('contentFrame');
+            
+            // 隐藏占位内容，显示iframe
+            contentPlaceholder.style.display = 'none';
+            contentFrame.style.display = 'block';
+            
+            // 加载指定URL到iframe
+            contentFrame.src = url;
+            
+            // 移除所有菜单高亮
+            document.querySelectorAll('.menu-link, .submenu-link').forEach(l => {
+                l.classList.remove('active');
+            });
+            
+            // 添加当前点击菜单项的高亮
+            event.target.classList.add('active');
+            
+            // 动态调整iframe高度以适应内容
+            contentFrame.onload = function() {
+                // 确保iframe内容正确显示
+                try {
+                    const iframeContentHeight = contentFrame.contentDocument.body.scrollHeight;
+                    contentFrame.style.height = iframeContentHeight + 'px';
+                } catch (e) {
+                    // 跨域情况下无法访问iframe内容高度，使用父容器高度
+                    contentFrame.style.height = 'calc(100vh - 50px - 40px)'; // 减去顶部导航栏和padding的高度
+                }
+            };
+        }
+
         // 菜单搜索功能
         document.querySelector('.search-input').addEventListener('input', function(e) {
             const searchText = e.target.value.toLowerCase();
@@ -479,7 +515,8 @@
         // 菜单点击高亮
         document.querySelectorAll('.menu-link, .submenu-link').forEach(link => {
             link.addEventListener('click', function(e) {
-                if (!this.onclick) { // 只有非展开菜单的链接才添加高亮
+                // 对于没有特殊onclick处理的链接才添加高亮
+                if (!this.getAttribute('onclick') || !this.getAttribute('onclick').includes('loadContent')) {
                     // 移除所有高亮
                     document.querySelectorAll('.menu-link, .submenu-link').forEach(l => {
                         l.classList.remove('active');