综述: 优化内容区域显示逻辑
- 移除内容区域的标题显示,避免重复展示 - 重构updateContent函数,对不同菜单项直接使用iframe显示对应页面 - 为未指定的菜单项提供默认内容展示,保持界面一致性
This commit is contained in:
		
							parent
							
								
									b0a91d5660
								
							
						
					
					
						commit
						21bce32725
					
				|  | @ -363,6 +363,9 @@ | |||
|             function updateContent(title) { | ||||
|                 const contentBody = document.querySelector('.content-body'); | ||||
|                  | ||||
|                 // 移除内容区域的标题显示 | ||||
|                 document.querySelector('.content-header').style.display = 'none'; | ||||
|                  | ||||
|                 // 如果是权限编辑或市场经营者创建,显示iframe | ||||
|                 if (title === '权限编辑') { | ||||
|                     contentBody.innerHTML = ` | ||||
|  | @ -373,26 +376,65 @@ | |||
|                         <iframe class="content-iframe" src="权限管理/权限分配.html"></iframe> | ||||
|                     `; | ||||
|                 } else { | ||||
|                     // 其他菜单项显示默认内容 | ||||
|                     contentBody.innerHTML = ` | ||||
|                         <div class="content-section"> | ||||
|                             <h2>${title || '欢迎使用'}</h2> | ||||
|                             <p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p> | ||||
|                             <p>这是一个内容展示容器,您可以根据实际需求添加任何内容,包括文本、图片、表格等。</p> | ||||
|                         </div> | ||||
|                         <div class="content-section"> | ||||
|                             <h2>功能说明</h2> | ||||
|                             <p>此区域用于展示"${title}"相关的具体内容。</p> | ||||
|                             <p>您可以添加任何HTML内容,包括:</p> | ||||
|                             <ul> | ||||
|                                 <li>文本段落</li> | ||||
|                                 <li>图片展示</li> | ||||
|                                 <li>数据表格</li> | ||||
|                                 <li>表单元素</li> | ||||
|                                 <li>图表展示</li> | ||||
|                             </ul> | ||||
|                         </div> | ||||
|                     `; | ||||
|                     // 其他菜单项直接在内容区域显示iframe | ||||
|                     let url = ''; | ||||
|                     switch(title) { | ||||
|                         case '首页': | ||||
|                             url = 'index.html'; | ||||
|                             break; | ||||
|                         case '新增产品': | ||||
|                             url = '产品管理/新增产品.html'; | ||||
|                             break; | ||||
|                         case '编辑产品': | ||||
|                             url = '产品管理/编辑产品.html'; | ||||
|                             break; | ||||
|                         case '删除产品': | ||||
|                             url = '产品管理/删除产品.html'; | ||||
|                             break; | ||||
|                         case '用户列表': | ||||
|                             url = '用户管理/用户列表.html'; | ||||
|                             break; | ||||
|                         case '权限设置': | ||||
|                             url = '用户管理/权限设置.html'; | ||||
|                             break; | ||||
|                         case '常规设置': | ||||
|                             url = '系统设置/常规设置.html'; | ||||
|                             break; | ||||
|                         case '外观设置': | ||||
|                             url = '系统设置/外观设置.html'; | ||||
|                             break; | ||||
|                         case '插件管理': | ||||
|                             url = '系统设置/插件管理.html'; | ||||
|                             break; | ||||
|                         case '产品分析': | ||||
|                             url = '权限管理/产品分析.html'; | ||||
|                             break; | ||||
|                         default: | ||||
|                             // 对于未指定的菜单项,显示默认内容(不包含标题) | ||||
|                             contentBody.innerHTML = ` | ||||
|                                 <div class="content-section"> | ||||
|                                     <p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p> | ||||
|                                     <p>这是一个内容展示容器,您可以根据实际需求添加任何内容,包括文本、图片、表格等。</p> | ||||
|                                 </div> | ||||
|                                 <div class="content-section"> | ||||
|                                     <p>此区域用于展示"${title}"相关的具体内容。</p> | ||||
|                                     <p>您可以添加任何HTML内容,包括:</p> | ||||
|                                     <ul> | ||||
|                                         <li>文本段落</li> | ||||
|                                         <li>图片展示</li> | ||||
|                                         <li>数据表格</li> | ||||
|                                         <li>表单元素</li> | ||||
|                                         <li>图表展示</li> | ||||
|                                     </ul> | ||||
|                                 </div> | ||||
|                             `; | ||||
|                             return; | ||||
|                     } | ||||
|                      | ||||
|                     // 如果有对应的URL,则在iframe中显示该页面 | ||||
|                     if (url) { | ||||
|                         contentBody.innerHTML = `<iframe class="content-iframe" src="${url}"></iframe>`; | ||||
|                     } | ||||
|                 } | ||||
|             } | ||||
|         }); | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue