综述: 优化内容区域显示逻辑
- 移除内容区域的标题显示,避免重复展示 - 重构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