refactor(xxl-job): 重构页面模板结构

- 新增 commonHeader、commonFooter 和 commonLeft宏
- 更新 jobcode、jobgroup、jobinfo 和 joblog 页面结构
- 统一页面样式和布局
- 优化代码可读性和可维护性
3.2.0-release
xuxueli 4 weeks ago
parent bfe7687cbd
commit 8ae13cfab8

@ -82,21 +82,23 @@
</#macro>
<#-- page module: Header-->
<#macro commonHeader>
<header class="main-header">
<!-- header-logo -->
<a href="${request.contextPath}/" class="logo">
<span class="logo-mini"><b>XXL</b></span>
<span class="logo-lg"><b>${I18n.admin_name}</b></span>
</a>
<nav class="navbar navbar-static-top" role="navigation">
<!--header left -->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!--header right -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<#-- login user -->
@ -148,6 +150,21 @@
</#macro>
<#-- page module: Footer-->
<#macro commonFooter >
<footer class="main-footer">
Powered by <b>XXL-JOB</b> ${I18n.admin_version}
<div class="pull-right hidden-xs">
<strong>Copyright &copy; 2015-${.now?string('yyyy')} &nbsp;
<a href="https://www.xuxueli.com/" target="_blank" >xuxueli</a>
&nbsp;
<a href="https://github.com/xuxueli/xxl-job" target="_blank" >github</a>
</strong><!-- All rights reserved. -->
</div>
</footer>
</#macro>
<#-- page module: Left-->
<#macro commonLeft pageName >
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
@ -198,7 +215,7 @@
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo </h4>
<p> +1(800)555-1234</p>
<p> +1(800)1111-1111</p>
</div>
</a>
</li>
@ -212,7 +229,7 @@
</a>
</li>
<li>
<a href="javascript::;">
<a href="javascript:;">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">001</h4>
@ -246,16 +263,3 @@
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</#macro>
<#macro commonFooter >
<footer class="main-footer">
Powered by <b>XXL-JOB</b> ${I18n.admin_version}
<div class="pull-right hidden-xs">
<strong>Copyright &copy; 2015-${.now?string('yyyy')} &nbsp;
<a href="https://www.xuxueli.com/" target="_blank" >xuxueli</a>
&nbsp;
<a href="https://github.com/xuxueli/xxl-job" target="_blank" >github</a>
</strong><!-- All rights reserved. -->
</div>
</footer>
</#macro>

@ -1,26 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "./common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<title>${I18n.admin_name}</title>
<#-- biz start1/5 style -->
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<#-- biz start2/5 left -->
<@netCommon.commonLeft "help" />
<#-- biz end2/5 left -->
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.job_help}</h1>
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<div class="callout callout-info">
<h4>${I18n.admin_name_full}</h4>
<br>
@ -34,14 +49,20 @@
</p>
<p></p>
</div>
<#-- biz end4/5 content -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<#-- biz end5/5 script -->
</body>
</html>

@ -1,36 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "./common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<!-- daterangepicker -->
<#-- biz start1/5 style -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<title>${I18n.admin_name}</title>
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft "index" />
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.job_dashboard_name}</h1>
<!--
<h1><small></small></h1>
<ol class="breadcrumb">
<li><a><i class="fa fa-dashboard"></i></a></li>
<li class="active">使</li>
</ol>
-->
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<!-- -->
<div class="row">
@ -128,20 +132,26 @@
</div>
</div>
<#-- biz end4/5 content -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<!-- daterangepicker -->
<script src="${request.contextPath}/static/adminlte/bower_components/moment/moment.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<#-- echarts -->
<script src="${request.contextPath}/static/plugins/echarts/echarts.common.min.js"></script>
<script src="${request.contextPath}/static/js/index.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -1,8 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<#-- biz start1/5 style -->
<link rel="stylesheet" href="${request.contextPath}/static/plugins/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="${request.contextPath}/static/plugins/codemirror/addon/hint/show-hint.css">
<title>${I18n.admin_name}</title>
@ -16,11 +21,14 @@
position: absolute;
}
</style>
<#-- biz end1/5 end -->
</head>
<body class="skin-blue fixed layout-top-nav">
<div class="wrapper">
<!-- header -->
<#-- biz start2/5 header -->
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
@ -85,12 +93,14 @@
</div>
</nav>
</header>
<#-- biz end2/5 header -->
<div class="content-wrapper" id="ideWindow" ></div>
<!-- left -->
<!-- footer -->
<#--<@netCommon.commonFooter />-->
</div>
<!-- right start -->
<div class="content-wrapper" id="ideWindow" ></div>
<#-- biz start3/5 content-header -->
<#-- biz start4/5 content-main -->
<!-- . -->
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-hidden="true">
@ -118,9 +128,16 @@
</div>
</div>
<@netCommon.commonScript />
<!-- right end -->
<!-- footer -->
<#--<@netCommon.commonFooter />-->
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
<#assign glueTypeIdeMode = "text/x-java" />
@ -163,5 +180,7 @@ var ideMode = '${glueTypeIdeMode}';
</script>
<script src="${request.contextPath}/static/js/jobcode.index.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -1,29 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<#-- biz start1/5 style -->
<!-- DataTables -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<title>${I18n.admin_name}</title>
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<#-- biz start2/5 left -->
<@netCommon.commonLeft "jobgroup" />
<#-- biz end2/5 left -->
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.jobgroup_name}</h1>
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<!-- filter -->
<div class="row">
<div class="col-xs-3">
<div class="input-group">
@ -45,6 +61,7 @@
</div>
</div>
<!-- table -->
<div class="row">
<div class="col-xs-12">
<div class="box">
@ -67,8 +84,6 @@
</div>
</div>
</div>
</section>
</div>
<!-- . -->
<div class="modal fade" id="showRegistryListModal" tabindex="-1" role="dialog" aria-hidden="true">
@ -178,14 +193,24 @@
</div>
</div>
<#-- biz end4/5 content -->
</section>
</div>
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="${request.contextPath}/static/js/jobgroup.index.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -1,29 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<#-- biz start1/5 style -->
<!-- DataTables -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<title>${I18n.admin_name}</title>
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<#-- biz start2/5 left -->
<@netCommon.commonLeft "jobinfo" />
<#-- biz end2/5 left -->
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.jobinfo_name}</h1>
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<!-- filter -->
<div class="row">
<div class="col-xs-3">
<div class="input-group">
@ -67,6 +83,7 @@
</div>
</div>
<!-- table -->
<div class="row">
<div class="col-xs-12">
<div class="box">
@ -98,8 +115,13 @@
</div>
</div>
</div>
</section>
<#-- biz end4/5 content -->
</div>
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
@ -543,6 +565,8 @@ exit 0
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
@ -551,5 +575,7 @@ exit 0
<#-- cronGen -->
<script src="${request.contextPath}/static/plugins/cronGen/cronGen<#if I18n.admin_i18n?default('')?length gt 0 >_${I18n.admin_i18n}</#if>.js"></script>
<script src="${request.contextPath}/static/js/jobinfo.index.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -1,13 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<title>${I18n.admin_name}</title>
<#-- biz start1/5 style -->
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
@ -42,14 +48,30 @@
</nav>
</header>
<!-- left -->
<#-- biz start2/5 left -->
<#-- biz end2/5 left -->
<!-- right start -->
<div class="content-wrapper" >
<!-- content-header -->
<#-- biz start3/5 name -->
<#-- biz end3/5 name -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<pre style="font-size:12px;position:relative;" >
<div id="logConsole"></div>
<li class="fa fa-refresh fa-spin" style="font-size: 20px;float: left;" id="logConsoleRunning" ></li>
</pre>
<#-- biz end4/5 content -->
</section>
</div>
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
@ -57,6 +79,8 @@
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<script>
// 参数
var triggerCode = '${triggerCode}';
@ -64,6 +88,7 @@
var logId = '${logId}';
</script>
<script src="${request.contextPath}/static/js/joblog.detail.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -1,30 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<#-- biz start1/5 style -->
<!-- DataTables -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- daterangepicker -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<title>${I18n.admin_name}</title>
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<#-- biz start2/5 left -->
<@netCommon.commonLeft "joblog" />
<#-- biz end2/5 left -->
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.joblog_name}</h1>
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<!-- filter-->
<div class="row">
<div class="col-xs-2">
<div class="input-group">
@ -78,6 +95,7 @@
</div>
</div>
<!-- table-->
<div class="row">
<div class="col-xs-12">
<div class="box">
@ -107,11 +125,6 @@
</div>
</div>
</section>
</div>
<!-- footer -->
<@netCommon.commonFooter />
</div>
<!-- . -->
<div class="modal fade" id="clearLogModal" tabindex="-1" role="dialog" aria-hidden="true">
@ -168,7 +181,18 @@
</div>
</div>
<#-- biz end4/5 content -->
</div>
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
@ -176,5 +200,7 @@
<script src="${request.contextPath}/static/adminlte/bower_components/moment/moment.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="${request.contextPath}/static/js/joblog.index.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

@ -10,6 +10,8 @@
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/plugins/iCheck/square/blue.css">
</head>
<body class="hold-transition login-page">
<#-- login div -->
<div class="login-box">
<div class="login-logo">
<a><b>XXL</b>JOB</a>
@ -40,8 +42,11 @@
</div>
</form>
</div>
<@netCommon.commonScript />
<!-- icheck -->
<script src="${request.contextPath}/static/adminlte/plugins/iCheck/icheck.min.js"></script>
<!-- js file -->
<script src="${request.contextPath}/static/js/login.1.js"></script>
</body>

@ -1,29 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<#-- import macro -->
<#import "../common/common.macro.ftl" as netCommon>
<#-- commonStyle -->
<@netCommon.commonStyle />
<#-- biz start1/5 style -->
<!-- DataTables -->
<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<title>${I18n.admin_name}</title>
<#-- biz end1/5 end -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- header -->
<@netCommon.commonHeader />
<!-- left -->
<@netCommon.commonLeft "user" />
<!-- Content Wrapper. Contains page content -->
<!-- right start -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<!-- content-header -->
<section class="content-header">
<#-- biz start3/5 name -->
<h1>${I18n.user_manage}</h1>
<#-- biz end3/5 name -->
</section>
<!-- Main content -->
<!-- content-main -->
<section class="content">
<#-- biz start4/5 content -->
<!-- filter -->
<div class="row">
<div class="col-xs-3">
<div class="input-group">
@ -49,6 +63,7 @@
</div>
</div>
<!-- table -->
<div class="row">
<div class="col-xs-12">
<div class="box">
@ -71,12 +86,6 @@
</div>
</div>
</div>
</section>
</div>
<!-- footer -->
<@netCommon.commonFooter />
</div>
<!-- . -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
@ -179,10 +188,23 @@
</div>
</div>
<#-- biz end4/5 content -->
</section>
</div>
<!-- right end -->
<!-- footer -->
<@netCommon.commonFooter />
</div>
<@netCommon.commonScript />
<#-- biz start5/5 script -->
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="${request.contextPath}/static/js/user.index.1.js"></script>
<#-- biz end5/5 script -->
</body>
</html>

Loading…
Cancel
Save