linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 优化内容区域显示逻辑 

- 移除内容区域的标题显示，避免重复展示
- 重构updateContent函数，对不同菜单项直接使用iframe显示对应页面
- 为未指定的菜单项提供默认内容展示，保持界面一致性
This commit is contained in:
linbin 2025-09-05 23:16:17 +08:00
parent b0a91d5660
commit 21bce32725
1 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
平台web/index.html
View File

@ -363,6 +363,9 @@
function updateContent(title) { function updateContent(title) {
const contentBody = document.querySelector('.content-body'); const contentBody = document.querySelector('.content-body');
// 移除内容区域的标题显示
document.querySelector('.content-header').style.display = 'none';
// 如果是权限编辑或市场经营者创建，显示iframe // 如果是权限编辑或市场经营者创建，显示iframe
if (title === '权限编辑') { if (title === '权限编辑') {
contentBody.innerHTML = ` contentBody.innerHTML = `
@ -373,26 +376,65 @@
<iframe class="content-iframe" src="权限管理/权限分配.html"></iframe> <iframe class="content-iframe" src="权限管理/权限分配.html"></iframe>
`; `;
} else { } else {
// 其他菜单项显示默认内容 // 其他菜单项直接在内容区域显示iframe
contentBody.innerHTML = ` let url = '';
<div class="content-section"> switch(title) {
<h2>${title || '欢迎使用'}</h2> case '首页':
<p>您已选择"${title}"菜单项。在这里可以展示与该菜单项相关的详细内容。</p> url = 'index.html';
<p>这是一个内容展示容器，您可以根据实际需求添加任何内容，包括文本、图片、表格等。</p> break;
</div> case '新增产品':
<div class="content-section"> url = '产品管理/新增产品.html';
<h2>功能说明</h2> break;
<p>此区域用于展示"${title}"相关的具体内容。</p> case '编辑产品':
<p>您可以添加任何HTML内容，包括：</p> url = '产品管理/编辑产品.html';
<ul> break;
<li>文本段落</li> case '删除产品':
<li>图片展示</li> url = '产品管理/删除产品.html';
<li>数据表格</li> break;
<li>表单元素</li> case '用户列表':
<li>图表展示</li> url = '用户管理/用户列表.html';
</ul> break;
</div> 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>`;
}
} }
} }
}); });