xq-admin-layout
v1.1.1
Published
基于Bootstrap5的通用后台管理页面。
Maintainers
xqkejiReadme
xq-admin-layout
一个基于Bootstrap5的后台管理布局页面，负责生成后台管理的主页面，相关页面通过iframe的方式嵌入xq-admin-page的管理页面。
安装与使用
npm i xq-admin-layouttypescript方式
在typescript代码中引入xq-admin-layout的代码
import xqAdminPage from 'xq-admin-layout';同时还需要在HTML页面代码中引入xq-admin-layout的scss代码
javascript方式
同时还需要在HTML页面代码中引入xq-admin-page的css代码
布局说明
1 顶层布局结构
顶部，编号：xq-header 中间内容 底部，编号：xq-footer
1.1 顶部布局结构
左侧显示后台名称，右侧显示所有“模块”和顶部下拉菜单
1.2 中间内容布局结构
左侧，编号：xq-sidebar，显示所有模块的导航菜单 右侧内容显示，编号：xq-content，主要通过iframe的形式显示具体管理页面
1.2.1 中间内容右侧布局结构
上下布局结构 顶部，编号：xq-tab-header，显示Tab标签页的标签和相关工具 底部，编号：xq-tab-content，通过iframe显示各个页面
1.3 底部布局结构
显示版权信息
点击查看演示
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新齐通用后台管理系统</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="/xq-admin-layout/dist/css/xq-admin-layout.min.css">
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/xq-admin-layout/dist/js/xq-admin-layout.min.js"></script>
</head>
<body>
<!--顶部菜单-->
<div class="container-fluid">
<div id="xq-header" class="row no-gutters bg-success bg-gradient fixed-top align-items-center">
<!--左边-->
<div class="col-2 text-center">
<a target="_blank" href="https://xqkeji.cn/demo/xq-admin-layout" class="brand-link text-decoration-none" >
<span class="border border-white rounded ml-4">新齐</span>
<span class="brand-text font-weight-light xq-desc">通用后台页面系统</span>
</a>
</div>
<!--右边-->
<div class="col-10">
<div class="row">
<!--模块菜单导航-->
<div class="col-10 p-0">
<ul id="xq-top-nav" class="nav" >
<li class="nav-item">
<a class="nav-link" xq-widget="xq-mini-menu" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i></a>
</li>
<li class="nav-item" >
<a href="#xqkeji_system_menu" class="nav-link bg-primary active">系统管理</a>
</li>
<li class="nav-item">
<a href="#xqkeji_member_menu" class="nav-link bg-dark">会员管理</a>
</li>
<li class="nav-item">
<a href="#xqkeji_advert_menu" class="nav-link bg-dark">广告管理</a>
</li>
<li class="nav-item">
<a href="#xqkeji_info_menu" class="nav-link bg-dark">信息管理</a>
</li>
</ul>
</div>
<!--用户操作菜单-->
<div class="col-2 d-flex justify-content-end pe-3">
<div id="xq-top-menu" class="btn-group">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="xq-dropdowmenu" data-bs-toggle="dropdown" aria-expanded="false">
admin
</button>
<ul class="dropdown-menu" aria-labelledby="xq-dropdowmenu">
<li>
<a class="dropdown-item xq-logout" href="/pages/admin/logout">退出登录</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--右边结束-->
</div>
</div>
<!--顶部菜单结束-->
<!--左右两边的内容-->
<div class="container-fluid">
<div class="row">
<div class="col-2 p-0 bg-dark" id="xq-sidebar">
<!--左边导航菜单-->
<nav id="xqkeji_system_menu">
<ul class="nav flex-column">
<li class="nav-item">
<a id="config_system" href="https://xqkeji.cn/demo/xq-admin-page/pages/config/system.html" class="nav-link bg-dark">
<i class="bi bi-gear-fill"></i>
<p>
系统配置
</p>
</a>
</li>
<li class="nav-item">
<a id="config_weixin" href="https://xqkeji.cn/demo/xq-admin-page/pages/config/weixin.html" class="nav-link bg-dark">
<i class="bi bi-chat-dots-fill"></i>
<p>
微信配置
</p>
</a>
</li>
<li class="nav-item">
<a id="xq-admin-list" href="https://xqkeji.cn/demo/xq-admin-page/pages/admin/list.html" class="nav-link bg-dark">
<i class="bi bi-person-fill"></i>
<p>
管理员管理
</p>
</a>
</li>
<li class="nav-item">
<a id="xq-role-list" href="https://xqkeji.cn/demo/xq-admin-page/pages/role/list.html" class="nav-link bg-dark">
<i class="bi bi-people-fill"></i>
<p>
角色管理
</p>
</a>
</li>
<li class="nav-item">
<a id="change_password" href="https://xqkeji.cn/demo/xq-admin-page/pages/admin/change_password.html" class="nav-link bg-dark">
<i class="bi bi-key-fill"></i>
<p>
修改密码
</p>
</a>
</li>
<li class="nav-item">
<a id="xq-logout" href="https://xqkeji.cn/demo/xq-admin-page/pages/admin/logout" class="nav-link bg-dark xq-logout">
<i class="bi bi-sign-turn-left-fill"></i>
<p>
退出登录
</p>
</a>
</li>
</ul>
</nav>
<nav id="xqkeji_member_menu" class="d-none">
<ul class="nav flex-column">
<li class="nav-item">
<a id="xq-user-list" href="https://xqkeji.cn/demo/xq-admin-page/pages/user/list.html" class="nav-link bg-dark">
<i class="bi bi-person-lines-fill"></i>
<p>
用户管理
</p>
</a>
</li>
<li class="nav-item">
<a id="xq-group-list" href="https://xqkeji.cn/demo/xq-admin-page/pages/group/list.html" class="nav-link bg-dark">
<i class="bi bi-person-hearts"></i>
<p>
用户组管理
</p>
</a>
</li>
<li class="nav-item">
<a id="xq-order-list" href="https://xqkeji.cn/demo/xq-admin-page/pages/order/list.html" class="nav-link bg-dark">
<i class="bi bi-pci-card"></i>
<p>
用户订单管理
</p>
</a>
</li>
</ul>
</nav>
<nav id="xqkeji_advert_menu" class="d-none">
<ul class="nav flex-column">
<li class="nav-item">
<a id="advert_list_position" href="https://xqkeji.cn/demo/xq-admin-page/pages/position/list.html" class="nav-link bg-dark">
<i class="nav-icon bi bi-cast"></i>
<p>
广告位管理
</p>
</a>
</li>
<li class="nav-item">
<a id="advert_list_advert" href="https://xqkeji.cn/demo/xq-admin-page/pages/advert/submenu" class="nav-link bg-dark xq-menu">
<i class="nav-icon bi bi-broadcast"></i>
<p>
广告管理
</p>
<span class="float-end"><i class="bi bi-chevron-left xq-menu-expand"></i></span>
</a>
</li>
</ul>
</nav>
<nav id="xqkeji_info_menu" class="d-none">
<ul class="nav flex-column">
<li class="nav-item">
<a id="info_category_list" href="https://xqkeji.cn/demo/xq-treegrid/index.html" class="nav-link bg-dark">
<i class="bi bi-list-ul"></i>
<p>
信息栏目管理
</p>
</a>
</li>
<li class="nav-item">
<a id="info_info_list" href="https://xqkeji.cn/demo/xq-admin-page/pages/info/submenu" class="nav-link bg-dark xq-menu">
<i class="bi bi-info-circle-fill"></i>
<p>
信息管理
</p>
<span class="float-end"><i class="bi bi-chevron-left xq-menu-expand"></i></span>
</a>
</li>
</ul>
</nav>
<!--左边导航菜单结束-->
</div>
<div class="col-10 p-0" id="xq-content">
<!--管理页面Tab标签工具栏-->
<div class="row g-0">
<div id="xq-tab-header" class="col-12 d-flex">
<!--Tab标签左移动按钮-->
<button id="xq-tab-left" >
<i class="bi bi-caret-left-square-fill"></i>
</button>
<!--Tab标签左移动按钮结束-->
<!--Tab标签栏-->
<nav id="xq-tab-nav" >
<ul id="xq-tab-nav-ul" class="nav nav-tabs nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-content" type="button" role="tab" aria-controls="home-tab-content" aria-selected="true">
欢迎页
</a>
</li>
</ul>
</nav>
<!--Tab标签栏结束-->
<!--Tab标签右移动按钮-->
<button id="xq-tab-right">
<i class="bi bi-caret-right-square-fill" style="margin-left: 3px;"></i>
</button>
<!--Tab标签右移动按钮结束-->
<!--全屏按钮-->
<button id="xq-tab-fullscreen">
<i class="bi bi-arrows-fullscreen"></i>
</button>
<!--全屏按钮结束-->
</div>
</div>
<!--管理页面Tab标签工具栏结束-->
<!--Tab标签页面集合-->
<div class="tab-content" id="xq-tab-content">
<!--欢迎页面-->
<div class="tab-pane active" id="home-tab-content" role="tabpanel" aria-labelledby="home-tab" >
<iframe src="https://xqkeji.cn/demo/xq-admin-page/pages/admin/welcome.html" width="100%" frameborder="no" marginwidth="0" marginheight="0" ></iframe>
</div>
<!--欢迎页面结束-->
</div>
<!--Tab标签页面集合结束-->
</div>
</div>
</div>
<div id="xq-tab-contentmenu">
<div class="list-group">
<a id="xq-tab-refresh" class="list-group-item">
刷新页面
</a>
<a id="xq-tab-close-all" class="list-group-item">
全部关闭
</a>
<a id="xq-tab-close-other" class="list-group-item">
关闭其他
</a>
</div>
</div>
<!--左右两边的内容-->
<footer id="xq-footer" class="row no-gutters fixed-bottom bg-light border">
<div class="col-8 ps-4">
<strong>Copyright © 2023 <a href="https://xqkeji.cn/demo/xq-admin-layout/">xq-admin-layout</a>. </strong>
All rights reserved.
</div>
<div class="col-4 text-end pe-4">
<b>Version</b> 1.0
</div>
</footer>
</body>
</html>