From 8ae13cfab8f41fde0254351adc0659696d8f4b8c Mon Sep 17 00:00:00 2001
From: xuxueli <931591021@qq.com>
Date: Sun, 24 Aug 2025 05:47:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(xxl-job):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A8=A1=E6=9D=BF=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 commonHeader、commonFooter 和 commonLeft宏
- 更新 jobcode、jobgroup、jobinfo 和 joblog 页面结构
- 统一页面样式和布局
- 优化代码可读性和可维护性
---
 .../templates/common/common.macro.ftl         |  38 +--
 .../src/main/resources/templates/help.ftl     |  37 ++-
 .../src/main/resources/templates/index.ftl    |  44 ++--
 .../templates/jobcode/jobcode.index.ftl       | 201 ++++++++-------
 .../templates/jobgroup/jobgroup.index.ftl     | 239 ++++++++++--------
 .../templates/jobinfo/jobinfo.index.ftl       |  50 +++-
 .../templates/joblog/joblog.detail.ftl        |  27 +-
 .../templates/joblog/joblog.index.ftl         | 150 ++++++-----
 .../src/main/resources/templates/login.ftl    |   5 +
 .../resources/templates/user/user.index.ftl   | 228 +++++++++--------
 10 files changed, 601 insertions(+), 418 deletions(-)

diff --git a/xxl-job-admin/src/main/resources/templates/common/common.macro.ftl b/xxl-job-admin/src/main/resources/templates/common/common.macro.ftl
index 3f6163aa..840bdbfd 100644
--- a/xxl-job-admin/src/main/resources/templates/common/common.macro.ftl
+++ b/xxl-job-admin/src/main/resources/templates/common/common.macro.ftl
@@ -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>
\ No newline at end of file
diff --git a/xxl-job-admin/src/main/resources/templates/help.ftl b/xxl-job-admin/src/main/resources/templates/help.ftl
index 2dc79dec..735b6da0 100644
--- a/xxl-job-admin/src/main/resources/templates/help.ftl
+++ b/xxl-job-admin/src/main/resources/templates/help.ftl
@@ -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 start（1/5 style） -->
+	<#-- biz end（1/5 end） -->
+
 </head>
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
+
 	<!-- header -->
 	<@netCommon.commonHeader />
+
 	<!-- left -->
+	<#-- biz start（2/5 left） -->
 	<@netCommon.commonLeft "help" />
-	
-	<!-- Content Wrapper. Contains page content -->
+	<#-- biz end（2/5 left） -->
+
+	<!-- right start -->
 	<div class="content-wrapper">
-		<!-- Content Header (Page header) -->
+
+		<!-- content-header -->
 		<section class="content-header">
+			<#-- biz start（3/5 name） -->
 			<h1>${I18n.job_help}</h1>
+			<#-- biz end（3/5 name） -->
 		</section>
 
-		<!-- Main content -->
+		<!-- content-main -->
 		<section class="content">
+
+			<#-- biz start（4/5 content） -->
+
 			<div class="callout callout-info">
 				<h4>${I18n.admin_name_full}</h4>
 				<br>
@@ -34,14 +49,20 @@
 				</p>
 				<p></p>
             </div>
+
+			<#-- biz end（4/5 content） -->
+
 		</section>
-		<!-- /.content -->
 	</div>
-	<!-- /.content-wrapper -->
-	
+	<!-- right end -->
+
 	<!-- footer -->
 	<@netCommon.commonFooter />
 </div>
 <@netCommon.commonScript />
+
+<#-- biz start（5/5 script） -->
+<#-- biz end（5/5 script） -->
+
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/index.ftl b/xxl-job-admin/src/main/resources/templates/index.ftl
index 618e6360..6ad7f1ce 100644
--- a/xxl-job-admin/src/main/resources/templates/index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/index.ftl
@@ -1,36 +1,40 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <#-- import macro -->
   	<#import "./common/common.macro.ftl" as netCommon>
+    <#-- commonStyle -->
 	<@netCommon.commonStyle />
-    <!-- daterangepicker -->
+
+    <#-- biz start（1/5 style） -->
     <link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
-    <title>${I18n.admin_name}</title>
+    <#-- biz end（1/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 start（3/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 end（3/5 name） -->
 		</section>
 
-		<!-- Main content -->
+        <!-- content-main -->
 		<section class="content">
 
+            <#-- biz start（4/5 content） -->
+
             <!-- 任务信息 -->
             <div class="row">
 
@@ -128,20 +132,26 @@
                 </div>
             </div>
 
+            <#-- biz end（4/5 content） -->
+
 		</section>
-		<!-- /.content -->
 	</div>
-	<!-- /.content-wrapper -->
-	
-	<!-- footer -->
+    <!-- right end -->
+
+    <!-- footer -->
 	<@netCommon.commonFooter />
 </div>
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/jobcode/jobcode.index.ftl b/xxl-job-admin/src/main/resources/templates/jobcode/jobcode.index.ftl
index efd4f90b..894c49e0 100644
--- a/xxl-job-admin/src/main/resources/templates/jobcode/jobcode.index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/jobcode/jobcode.index.ftl
@@ -1,8 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <#-- import macro -->
   	<#import "../common/common.macro.ftl" as netCommon>
+
+    <#-- commonStyle -->
 	<@netCommon.commonStyle />
+
+    <#-- biz start（1/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,81 +21,86 @@
             position: absolute;
 		}
     </style>
+    <#-- biz end（1/5 end） -->
+
 </head>
 <body class="skin-blue fixed layout-top-nav">
+<div class="wrapper">
 
-	<div class="wrapper">
-
-        <header class="main-header">
-            <nav class="navbar navbar-static-top">
-                <div class="container">
-					<#-- icon -->
-                    <div class="navbar-header">
-                        <a class="navbar-brand"><b>Web</b>IDE</a>
-                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
-                            <i class="fa fa-bars"></i>
-                        </button>
-                    </div>
-
-                    <#-- left nav -->
-                    <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
-                        <ul class="nav navbar-nav">
-                            <li class="active" ><a href="javascript:;">
-                                <span class="sr-only">(current)</span>
-                                【<#list GlueTypeEnum as item><#if item == jobInfo.glueType>${item.desc}</#if></#list>】
-                                ${jobInfo.jobDesc}
-                            </a></li>
-                        </ul>
-                    </div>
+    <!-- header -->
+    <#-- biz start（2/5 header） -->
+    <header class="main-header">
+        <nav class="navbar navbar-static-top">
+            <div class="container">
+                <#-- icon -->
+                <div class="navbar-header">
+                    <a class="navbar-brand"><b>Web</b>IDE</a>
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+                        <i class="fa fa-bars"></i>
+                    </button>
+                </div>
 
-					<#-- right nav -->
-                    <div class="navbar-custom-menu">
-                        <ul class="nav navbar-nav">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">${I18n.jobinfo_glue_rollback} <span class="caret"></span></a>
-                                <ul class="dropdown-menu" role="menu">
-                                    <li <#if jobLogGlues?exists && jobLogGlues?size gt 0 >style="display: none;"</#if> >
-                                        <a href="javascript:;" class="source_version" version="version_now" glueType="${jobInfo.glueType}" >
-                                            <#list GlueTypeEnum as item><#if item == jobInfo.glueType>${item.desc}</#if></#list>： ${jobInfo.glueRemark}
-                                        </a>
-                                    </li>
-                                    <textarea id="version_now" style="display:none;" >${jobInfo.glueSource}</textarea>
-									<#if jobLogGlues?exists && jobLogGlues?size gt 0 >
-										<#list jobLogGlues as glue>
-                                            <li>
-                                                <a href="javascript:;" class="source_version" version="version_${glue.id}" glueType="${glue.glueType}" >
-                                                    ${glue.addTime?string["yyyy-MM-dd HH:mm:ss"]}： ${glue.glueRemark}
-                                                </a>
-                                            </li>
-                                            <textarea id="version_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
-										</#list>
-									</#if>
-                                </ul>
-                            </li>
-                            <li id="save" >
-								<a href="javascript:;" >
-									<i class="fa fa-fw fa-save" ></i>
-                                    ${I18n.system_save}
-								</a>
-							</li>
-                            <li>
-                                <a href="javascript:window.close();" >
-                                    <i class="fa fa-fw fa-close" ></i>
-                                ${I18n.system_close}
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
+                <#-- left nav -->
+                <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li class="active" ><a href="javascript:;">
+                            <span class="sr-only">(current)</span>
+                            【<#list GlueTypeEnum as item><#if item == jobInfo.glueType>${item.desc}</#if></#list>】
+                            ${jobInfo.jobDesc}
+                        </a></li>
+                    </ul>
+                </div>
 
+                <#-- right nav -->
+                <div class="navbar-custom-menu">
+                    <ul class="nav navbar-nav">
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">${I18n.jobinfo_glue_rollback} <span class="caret"></span></a>
+                            <ul class="dropdown-menu" role="menu">
+                                <li <#if jobLogGlues?exists && jobLogGlues?size gt 0 >style="display: none;"</#if> >
+                                    <a href="javascript:;" class="source_version" version="version_now" glueType="${jobInfo.glueType}" >
+                                        <#list GlueTypeEnum as item><#if item == jobInfo.glueType>${item.desc}</#if></#list>： ${jobInfo.glueRemark}
+                                    </a>
+                                </li>
+                                <textarea id="version_now" style="display:none;" >${jobInfo.glueSource}</textarea>
+                                <#if jobLogGlues?exists && jobLogGlues?size gt 0 >
+                                    <#list jobLogGlues as glue>
+                                        <li>
+                                            <a href="javascript:;" class="source_version" version="version_${glue.id}" glueType="${glue.glueType}" >
+                                                ${glue.addTime?string["yyyy-MM-dd HH:mm:ss"]}： ${glue.glueRemark}
+                                            </a>
+                                        </li>
+                                        <textarea id="version_${glue.id}" style="display:none;" >${glue.glueSource}</textarea>
+                                    </#list>
+                                </#if>
+                            </ul>
+                        </li>
+                        <li id="save" >
+                            <a href="javascript:;" >
+                                <i class="fa fa-fw fa-save" ></i>
+                                ${I18n.system_save}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="javascript:window.close();" >
+                                <i class="fa fa-fw fa-close" ></i>
+                            ${I18n.system_close}
+                            </a>
+                        </li>
+                    </ul>
                 </div>
-            </nav>
-        </header>
 
-		<div class="content-wrapper" id="ideWindow" ></div>
+            </div>
+        </nav>
+    </header>
+    <#-- biz end（2/5 header） -->
+
+    <!-- left -->
 
-		<!-- footer -->
-		<#--<@netCommon.commonFooter />-->
-	</div>
+    <!-- right start -->
+    <div class="content-wrapper" id="ideWindow" ></div>
+    <#-- biz start（3/5 content-header） -->
+    <#-- biz start（4/5 content-main） -->
 
     <!-- 保存.模态框 -->
     <div class="modal fade" id="saveModal" tabindex="-1" role="dialog"  aria-hidden="true">
@@ -117,36 +127,43 @@
             </div>
         </div>
     </div>
+
+    <!-- right end -->
+
+    <!-- footer -->
+    <#--<@netCommon.commonFooter />-->
+</div>
+
 	
 <@netCommon.commonScript />
 
+<#-- biz start（5/5 script） -->
+<#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
+<#assign glueTypeIdeMode = "text/x-java" />
 
+<#if jobInfo.glueType == "GLUE_GROOVY" >
     <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
     <#assign glueTypeIdeMode = "text/x-java" />
-
-    <#if jobInfo.glueType == "GLUE_GROOVY" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
-        <#assign glueTypeIdeMode = "text/x-java" />
-    <#elseif jobInfo.glueType == "GLUE_SHELL" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/shell/shell.js" />
-        <#assign glueTypeIdeMode = "text/x-sh" />
-    <#elseif jobInfo.glueType == "GLUE_PYTHON" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/python/python.js" />
-        <#assign glueTypeIdeMode = "text/x-python" />
-    <#elseif jobInfo.glueType == "GLUE_PYTHON2" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/python/python.js" />
-        <#assign glueTypeIdeMode = "text/x-python" />
-    <#elseif jobInfo.glueType == "GLUE_PHP" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/php/php.js" />
-        <#assign glueTypeIdeMode = "text/x-php" />
-        <#assign glueTypeModeSrc02 = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
-    <#elseif jobInfo.glueType == "GLUE_NODEJS" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/javascript/javascript.js" />
-        <#assign glueTypeIdeMode = "text/javascript" />
-    <#elseif jobInfo.glueType == "GLUE_POWERSHELL" >
-        <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/powershell/powershell.js" />
-        <#assign glueTypeIdeMode = "powershell" />
-    </#if>
+<#elseif jobInfo.glueType == "GLUE_SHELL" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/shell/shell.js" />
+    <#assign glueTypeIdeMode = "text/x-sh" />
+<#elseif jobInfo.glueType == "GLUE_PYTHON" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/python/python.js" />
+    <#assign glueTypeIdeMode = "text/x-python" />
+<#elseif jobInfo.glueType == "GLUE_PYTHON2" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/python/python.js" />
+    <#assign glueTypeIdeMode = "text/x-python" />
+<#elseif jobInfo.glueType == "GLUE_PHP" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/php/php.js" />
+    <#assign glueTypeIdeMode = "text/x-php" />
+    <#assign glueTypeModeSrc02 = "${request.contextPath}/static/plugins/codemirror/mode/clike/clike.js" />
+<#elseif jobInfo.glueType == "GLUE_NODEJS" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/javascript/javascript.js" />
+    <#assign glueTypeIdeMode = "text/javascript" />
+<#elseif jobInfo.glueType == "GLUE_POWERSHELL" >
+    <#assign glueTypeModeSrc = "${request.contextPath}/static/plugins/codemirror/mode/powershell/powershell.js" />
+    <#assign glueTypeIdeMode = "powershell" />
+</#if>
 
 
 <script src="${request.contextPath}/static/plugins/codemirror/lib/codemirror.js"></script>
@@ -163,5 +180,7 @@ var ideMode = '${glueTypeIdeMode}';
 </script>
 <script src="${request.contextPath}/static/js/jobcode.index.1.js"></script>
 
+<#-- biz end（5/5 script） -->
+
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/jobgroup/jobgroup.index.ftl b/xxl-job-admin/src/main/resources/templates/jobgroup/jobgroup.index.ftl
index 4bbd01ac..25f44c6a 100644
--- a/xxl-job-admin/src/main/resources/templates/jobgroup/jobgroup.index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/jobgroup/jobgroup.index.ftl
@@ -1,29 +1,45 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <#-- import macro -->
   	<#import "../common/common.macro.ftl" as netCommon>
+
+    <#-- commonStyle -->
 	<@netCommon.commonStyle />
+
+    <#-- biz start（1/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 end（1/5 end） -->
+
 </head>
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
+
 	<!-- header -->
 	<@netCommon.commonHeader />
+
 	<!-- left -->
-	<@netCommon.commonLeft "jobgroup" />
-	
-	<!-- Content Wrapper. Contains page content -->
+    <#-- biz start（2/5 left） -->
+    <@netCommon.commonLeft "jobgroup" />
+    <#-- biz end（2/5 left） -->
+
+    <!-- right start -->
 	<div class="content-wrapper">
-		<!-- Content Header (Page header) -->
-		<section class="content-header">
-			<h1>${I18n.jobgroup_name}</h1>
-		</section>
 
-		<!-- Main content -->
+        <!-- content-header -->
+        <section class="content-header">
+            <#-- biz start（3/5 name） -->
+            <h1>${I18n.jobgroup_name}</h1>
+            <#-- biz end（3/5 name） -->
+        </section>
+
+        <!-- content-main -->
 	    <section class="content">
 
+            <#-- biz start（4/5 content） -->
+
+            <!-- filter -->
             <div class="row">
                 <div class="col-xs-3">
                     <div class="input-group">
@@ -44,7 +60,8 @@
                     <button class="btn btn-block btn-success add" type="button">${I18n.jobinfo_field_add}</button>
                 </div>
             </div>
-			
+
+            <!-- table -->
 			<div class="row">
 				<div class="col-xs-12">
 					<div class="box">
@@ -67,125 +84,133 @@
 					</div>
 				</div>
 			</div>
-	    </section>
-	</div>
 
-    <!-- 注册列表查看.模态框 -->
-    <div class="modal fade" id="showRegistryListModal" tabindex="-1" role="dialog"  aria-hidden="true">
-        <div class="modal-dialog modal-sm">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title" >${I18n.jobinfo_opt_registryinfo}</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="data" style="word-wrap: break-word;"></div>
-                </div>
-                <div class="modal-footer">
-                    <div class="text-center" >
-                        <button type="button" class="btn btn-info ok" data-dismiss="modal" >${I18n.system_ok}</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 新增.模态框 -->
-    <div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
-        <div class="modal-dialog ">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title" >${I18n.jobgroup_add}</h4>
-                </div>
-                <div class="modal-body">
-                    <form class="form-horizontal form" role="form" >
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">AppName<font color="red">*</font></label>
-                            <div class="col-sm-10"><input type="text" class="form-control" name="appname" placeholder="${I18n.system_please_input}AppName" maxlength="64" ></div>
-                        </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_title}<font color="red">*</font></label>
-                            <div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="${I18n.system_please_input}${I18n.jobgroup_field_title}" maxlength="12" ></div>
-                        </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_addressType}<font color="red">*</font></label>
-                            <div class="col-sm-10">
-                                <input type="radio" name="addressType" value="0" checked />${I18n.jobgroup_field_addressType_0}
-                                &nbsp;&nbsp;&nbsp;&nbsp;
-                                <input type="radio" name="addressType" value="1" />${I18n.jobgroup_field_addressType_1}
-                            </div>
+            <!-- 注册列表查看.模态框 -->
+            <div class="modal fade" id="showRegistryListModal" tabindex="-1" role="dialog"  aria-hidden="true">
+                <div class="modal-dialog modal-sm">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h4 class="modal-title" >${I18n.jobinfo_opt_registryinfo}</h4>
                         </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_registryList}<font color="red">*</font></label>
-                            <div class="col-sm-10">
-                                <textarea class="textarea" name="addressList" maxlength="20000" placeholder="${I18n.jobgroup_field_registryList_placeholder}" readonly="readonly" style="background-color:#eee; width: 100%; height: 100px; font-size: 14px; line-height: 15px; border: 1px solid #dddddd; padding: 5px;"></textarea>
-                            </div>
+                        <div class="modal-body">
+                            <div class="data" style="word-wrap: break-word;"></div>
                         </div>
-                        <hr>
-                        <div class="form-group">
-                            <div class="col-sm-offset-3 col-sm-6">
-                                <button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
-                                <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+                        <div class="modal-footer">
+                            <div class="text-center" >
+                                <button type="button" class="btn btn-info ok" data-dismiss="modal" >${I18n.system_ok}</button>
                             </div>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
-
-    <!-- 更新.模态框 -->
-    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
-        <div class="modal-dialog ">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title" >${I18n.jobgroup_edit}</h4>
-                </div>
-                <div class="modal-body">
-                    <form class="form-horizontal form" role="form" >
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">AppName<font color="red">*</font></label>
-                            <div class="col-sm-10"><input type="text" class="form-control" name="appname" placeholder="${I18n.system_please_input}AppName" maxlength="64" ></div>
-                        </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_title}<font color="red">*</font></label>
-                            <div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="${I18n.system_please_input}${I18n.jobgroup_field_title}" maxlength="12" ></div>
+
+            <!-- 新增.模态框 -->
+            <div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
+                <div class="modal-dialog ">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h4 class="modal-title" >${I18n.jobgroup_add}</h4>
                         </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_addressType}<font color="red">*</font></label>
-                            <div class="col-sm-10">
-                                <input type="radio" name="addressType" value="0" />${I18n.jobgroup_field_addressType_0}
-                                &nbsp;&nbsp;&nbsp;&nbsp;
-                                <input type="radio" name="addressType" value="1" />${I18n.jobgroup_field_addressType_1}
-                            </div>
+                        <div class="modal-body">
+                            <form class="form-horizontal form" role="form" >
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">AppName<font color="red">*</font></label>
+                                    <div class="col-sm-10"><input type="text" class="form-control" name="appname" placeholder="${I18n.system_please_input}AppName" maxlength="64" ></div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_title}<font color="red">*</font></label>
+                                    <div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="${I18n.system_please_input}${I18n.jobgroup_field_title}" maxlength="12" ></div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_addressType}<font color="red">*</font></label>
+                                    <div class="col-sm-10">
+                                        <input type="radio" name="addressType" value="0" checked />${I18n.jobgroup_field_addressType_0}
+                                        &nbsp;&nbsp;&nbsp;&nbsp;
+                                        <input type="radio" name="addressType" value="1" />${I18n.jobgroup_field_addressType_1}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_registryList}<font color="red">*</font></label>
+                                    <div class="col-sm-10">
+                                        <textarea class="textarea" name="addressList" maxlength="20000" placeholder="${I18n.jobgroup_field_registryList_placeholder}" readonly="readonly" style="background-color:#eee; width: 100%; height: 100px; font-size: 14px; line-height: 15px; border: 1px solid #dddddd; padding: 5px;"></textarea>
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="form-group">
+                                    <div class="col-sm-offset-3 col-sm-6">
+                                        <button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
+                                        <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
-                        <div class="form-group">
-                            <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_registryList}<font color="red">*</font></label>
-                            <div class="col-sm-10">
-                                <textarea class="textarea" name="addressList" maxlength="20000" placeholder="${I18n.jobgroup_field_registryList_placeholder}" readonly="readonly" style="background-color:#eee; width: 100%; height: 100px; font-size: 14px; line-height: 15px; border: 1px solid #dddddd; padding: 5px;"></textarea>
-                            </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 更新.模态框 -->
+            <div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
+                <div class="modal-dialog ">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h4 class="modal-title" >${I18n.jobgroup_edit}</h4>
                         </div>
-                        <hr>
-                        <div class="form-group">
-                            <div class="col-sm-offset-3 col-sm-6">
-                                <button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
-                                <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
-                                <input type="hidden" name="id" >
-                            </div>
+                        <div class="modal-body">
+                            <form class="form-horizontal form" role="form" >
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">AppName<font color="red">*</font></label>
+                                    <div class="col-sm-10"><input type="text" class="form-control" name="appname" placeholder="${I18n.system_please_input}AppName" maxlength="64" ></div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_title}<font color="red">*</font></label>
+                                    <div class="col-sm-10"><input type="text" class="form-control" name="title" placeholder="${I18n.system_please_input}${I18n.jobgroup_field_title}" maxlength="12" ></div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_addressType}<font color="red">*</font></label>
+                                    <div class="col-sm-10">
+                                        <input type="radio" name="addressType" value="0" />${I18n.jobgroup_field_addressType_0}
+                                        &nbsp;&nbsp;&nbsp;&nbsp;
+                                        <input type="radio" name="addressType" value="1" />${I18n.jobgroup_field_addressType_1}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="lastname" class="col-sm-2 control-label">${I18n.jobgroup_field_registryList}<font color="red">*</font></label>
+                                    <div class="col-sm-10">
+                                        <textarea class="textarea" name="addressList" maxlength="20000" placeholder="${I18n.jobgroup_field_registryList_placeholder}" readonly="readonly" style="background-color:#eee; width: 100%; height: 100px; font-size: 14px; line-height: 15px; border: 1px solid #dddddd; padding: 5px;"></textarea>
+                                    </div>
+                                </div>
+                                <hr>
+                                <div class="form-group">
+                                    <div class="col-sm-offset-3 col-sm-6">
+                                        <button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
+                                        <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+                                        <input type="hidden" name="id" >
+                                    </div>
+                                </div>
+                            </form>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
+
+            <#-- biz end（4/5 content） -->
+
+	    </section>
+	</div>
+    <!-- right end -->
 	
 	<!-- footer -->
 	<@netCommon.commonFooter />
 </div>
 
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
+
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/jobinfo/jobinfo.index.ftl b/xxl-job-admin/src/main/resources/templates/jobinfo/jobinfo.index.ftl
index a83ae016..66e38504 100644
--- a/xxl-job-admin/src/main/resources/templates/jobinfo/jobinfo.index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/jobinfo/jobinfo.index.ftl
@@ -1,29 +1,45 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <#-- import macro -->
   	<#import "../common/common.macro.ftl" as netCommon>
+
+    <#-- commonStyle -->
 	<@netCommon.commonStyle />
+
+    <#-- biz start（1/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 end（1/5 end） -->
+
 </head>
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
+
 	<!-- header -->
 	<@netCommon.commonHeader />
+
 	<!-- left -->
-	<@netCommon.commonLeft "jobinfo" />
-	
-	<!-- Content Wrapper. Contains page content -->
+    <#-- biz start（2/5 left） -->
+    <@netCommon.commonLeft "jobinfo" />
+    <#-- biz end（2/5 left） -->
+
+    <!-- right start -->
 	<div class="content-wrapper">
-		<!-- Content Header (Page header) -->
-		<section class="content-header">
-			<h1>${I18n.jobinfo_name}</h1>
-		</section>
-		
-		<!-- Main content -->
+
+        <!-- content-header -->
+        <section class="content-header">
+            <#-- biz start（3/5 name） -->
+            <h1>${I18n.jobinfo_name}</h1>
+            <#-- biz end（3/5 name） -->
+        </section>
+
+        <!-- content-main -->
 	    <section class="content">
-	    
+
+            <#-- biz start（4/5 content） -->
+
+            <!-- filter -->
 	    	<div class="row">
 	    		<div class="col-xs-3">
 	              	<div class="input-group">
@@ -66,7 +82,8 @@
 	            	<button class="btn btn-block btn-success add" type="button">${I18n.jobinfo_field_add}</button>
 	            </div>
           	</div>
-	    	
+
+            <!-- table -->
 			<div class="row">
 				<div class="col-xs-12">
 					<div class="box">
@@ -98,8 +115,13 @@
 					</div>
 				</div>
 			</div>
+
+
 	    </section>
+
+        <#-- biz end（4/5 content） -->
 	</div>
+    <!-- right end -->
 	
 	<!-- footer -->
 	<@netCommon.commonFooter />
@@ -543,6 +565,8 @@ exit 0
 </div>
 
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
+
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/joblog/joblog.detail.ftl b/xxl-job-admin/src/main/resources/templates/joblog/joblog.detail.ftl
index 352fcfbe..18ab810d 100644
--- a/xxl-job-admin/src/main/resources/templates/joblog/joblog.detail.ftl
+++ b/xxl-job-admin/src/main/resources/templates/joblog/joblog.detail.ftl
@@ -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 start（1/5 style） -->
+    <#-- biz end（1/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 start（2/5 left） -->
+    <#-- biz end（2/5 left） -->
+
+    <!-- right start -->
     <div class="content-wrapper" >
+
+        <!-- content-header -->
+        <#-- biz start（3/5 name） -->
+        <#-- biz end（3/5 name） -->
+
+        <!-- content-main -->
         <section class="content">
+            <#-- biz start（4/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 end（4/5 content） -->
         </section>
     </div>
+    <!-- right end -->
 
     <!-- footer -->
     <@netCommon.commonFooter />
@@ -57,6 +79,8 @@
 </div>
 
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
 
 </body>
 </html>
\ No newline at end of file
diff --git a/xxl-job-admin/src/main/resources/templates/joblog/joblog.index.ftl b/xxl-job-admin/src/main/resources/templates/joblog/joblog.index.ftl
index 5b38866a..5fd13697 100644
--- a/xxl-job-admin/src/main/resources/templates/joblog/joblog.index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/joblog/joblog.index.ftl
@@ -1,30 +1,47 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <#-- import macro -->
   	<#import "../common/common.macro.ftl" as netCommon>
+
+    <#-- commonStyle -->
 	<@netCommon.commonStyle />
+
+    <#-- biz start（1/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 end（1/5 end） -->
+
 </head>
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
+
 	<!-- header -->
 	<@netCommon.commonHeader />
+
 	<!-- left -->
-	<@netCommon.commonLeft "joblog" />
-	
-	<!-- Content Wrapper. Contains page content -->
+    <#-- biz start（2/5 left） -->
+    <@netCommon.commonLeft "joblog" />
+    <#-- biz end（2/5 left） -->
+
+    <!-- right start -->
 	<div class="content-wrapper">
-		<!-- Content Header (Page header) -->
-		<section class="content-header">
-			<h1>${I18n.joblog_name}</h1>
-		</section>
-		
-		<!-- Main content -->
+
+        <!-- content-header -->
+        <section class="content-header">
+            <#-- biz start（3/5 name） -->
+            <h1>${I18n.joblog_name}</h1>
+            <#-- biz end（3/5 name） -->
+        </section>
+
+        <!-- content-main -->
 	    <section class="content">
+
+            <#-- biz start（4/5 content） -->
+
+            <!-- filter-->
 	    	<div class="row">
 	    		<div class="col-xs-2">
  					<div class="input-group">
@@ -77,7 +94,8 @@
                     <button class="btn btn-block btn-default" id="clearLog">${I18n.joblog_clean}</button>
 	            </div>
           	</div>
-			
+
+            <!-- table-->
 			<div class="row">
 				<div class="col-xs-12">
 					<div class="box">
@@ -107,68 +125,74 @@
 				</div>
 			</div>
 	    </section>
-	</div>
-	
-	<!-- footer -->
-	<@netCommon.commonFooter />
-</div>
 
-<!-- 日志清理.模态框 -->
-<div class="modal fade" id="clearLogModal" tabindex="-1" role="dialog"  aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title" >${I18n.joblog_clean_log}</h4>
-            </div>
-            <div class="modal-body">
-                <form class="form-horizontal form" role="form" >
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">${I18n.jobinfo_field_jobgroup}：</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control jobGroupText" readonly >
-							<input type="hidden" name="jobGroup" >
-						</div>
+        <!-- 日志清理.模态框 -->
+        <div class="modal fade" id="clearLogModal" tabindex="-1" role="dialog"  aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title" >${I18n.joblog_clean_log}</h4>
                     </div>
+                    <div class="modal-body">
+                        <form class="form-horizontal form" role="form" >
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">${I18n.jobinfo_field_jobgroup}：</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control jobGroupText" readonly >
+                                    <input type="hidden" name="jobGroup" >
+                                </div>
+                            </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">${I18n.jobinfo_job}：</label>
-                        <div class="col-sm-9">
-                            <input type="text" class="form-control jobIdText" readonly >
-                            <input type="hidden" name="jobId" >
-						</div>
-                    </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">${I18n.jobinfo_job}：</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control jobIdText" readonly >
+                                    <input type="hidden" name="jobId" >
+                                </div>
+                            </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">${I18n.joblog_clean_type}：</label>
-                        <div class="col-sm-9">
-                            <select class="form-control" name="type" >
-                                <option value="1" >${I18n.joblog_clean_type_1}</option>
-                                <option value="2" >${I18n.joblog_clean_type_2}</option>
-                                <option value="3" >${I18n.joblog_clean_type_3}</option>
-                                <option value="4" >${I18n.joblog_clean_type_4}</option>
-                                <option value="5" >${I18n.joblog_clean_type_5}</option>
-                                <option value="6" >${I18n.joblog_clean_type_6}</option>
-                                <option value="7" >${I18n.joblog_clean_type_7}</option>
-                                <option value="8" >${I18n.joblog_clean_type_8}</option>
-                                <option value="9" >${I18n.joblog_clean_type_9}</option>
-                            </select>
-                        </div>
-                    </div>
+                            <div class="form-group">
+                                <label class="col-sm-3 control-label">${I18n.joblog_clean_type}：</label>
+                                <div class="col-sm-9">
+                                    <select class="form-control" name="type" >
+                                        <option value="1" >${I18n.joblog_clean_type_1}</option>
+                                        <option value="2" >${I18n.joblog_clean_type_2}</option>
+                                        <option value="3" >${I18n.joblog_clean_type_3}</option>
+                                        <option value="4" >${I18n.joblog_clean_type_4}</option>
+                                        <option value="5" >${I18n.joblog_clean_type_5}</option>
+                                        <option value="6" >${I18n.joblog_clean_type_6}</option>
+                                        <option value="7" >${I18n.joblog_clean_type_7}</option>
+                                        <option value="8" >${I18n.joblog_clean_type_8}</option>
+                                        <option value="9" >${I18n.joblog_clean_type_9}</option>
+                                    </select>
+                                </div>
+                            </div>
 
-                    <hr>
-                    <div class="form-group">
-                        <div class="col-sm-offset-3 col-sm-6">
-                            <button type="button" class="btn btn-primary ok" >${I18n.system_ok}</button>
-                            <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
-                        </div>
+                            <hr>
+                            <div class="form-group">
+                                <div class="col-sm-offset-3 col-sm-6">
+                                    <button type="button" class="btn btn-primary ok" >${I18n.system_ok}</button>
+                                    <button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+                                </div>
+                            </div>
+                        </form>
                     </div>
-                </form>
+                </div>
             </div>
         </div>
-    </div>
+
+        <#-- biz end（4/5 content） -->
+
+	</div>
+    <!-- right end -->
+
+	<!-- footer -->
+	<@netCommon.commonFooter />
 </div>
 
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
+
 </body>
 </html>
diff --git a/xxl-job-admin/src/main/resources/templates/login.ftl b/xxl-job-admin/src/main/resources/templates/login.ftl
index 289771ff..465a54f5 100644
--- a/xxl-job-admin/src/main/resources/templates/login.ftl
+++ b/xxl-job-admin/src/main/resources/templates/login.ftl
@@ -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>
diff --git a/xxl-job-admin/src/main/resources/templates/user/user.index.ftl b/xxl-job-admin/src/main/resources/templates/user/user.index.ftl
index 538dfb54..29df3137 100644
--- a/xxl-job-admin/src/main/resources/templates/user/user.index.ftl
+++ b/xxl-job-admin/src/main/resources/templates/user/user.index.ftl
@@ -1,29 +1,43 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<#-- import macro -->
   	<#import "../common/common.macro.ftl" as netCommon>
+
+	<#-- commonStyle -->
 	<@netCommon.commonStyle />
+
+	<#-- biz start（1/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 end（1/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 start（3/5 name） -->
 			<h1>${I18n.user_manage}</h1>
+			<#-- biz end（3/5 name） -->
 		</section>
-		
-		<!-- Main content -->
+
+		<!-- content-main -->
 	    <section class="content">
-	    
+
+			<#-- biz start（4/5 content） -->
+
+			<!-- filter -->
 	    	<div class="row">
                 <div class="col-xs-3">
                     <div class="input-group">
@@ -48,7 +62,8 @@
 	            	<button class="btn btn-block btn-success add" type="button">${I18n.user_add}</button>
 	            </div>
           	</div>
-	    	
+
+			<!-- table -->
 			<div class="row">
 				<div class="col-xs-12">
 					<div class="box">
@@ -71,118 +86,125 @@
 					</div>
 				</div>
 			</div>
-	    </section>
-	</div>
-	
-	<!-- footer -->
-	<@netCommon.commonFooter />
-</div>
 
-<!-- 新增.模态框 -->
-<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-            	<h4 class="modal-title" >${I18n.user_add}</h4>
-         	</div>
-         	<div class="modal-body">
-				<form class="form-horizontal form" role="form" >
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_username}<font color="red">*</font></label>
-                        <div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" ></div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_password}<font color="red">*</font></label>
-                        <div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.system_please_input}${I18n.user_password}" maxlength="20" ></div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_role}<font color="red">*</font></label>
-                        <div class="col-sm-10">
-                            <input type="radio" name="role" value="0" checked />${I18n.user_role_normal}
-                            &nbsp;&nbsp;&nbsp;&nbsp;
-                            <input type="radio" name="role" value="1" />${I18n.user_role_admin}
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_permission}<font color="black">*</font></label>
-                        <div class="col-sm-10">
-							<#if groupList?exists && groupList?size gt 0>
-								<#list groupList as item>
-                                    <input type="checkbox" name="permission" value="${item.id}" />${item.title}(${item.appname})<br>
-								</#list>
-							</#if>
-                        </div>
-                    </div>
+			<!-- 新增.模态框 -->
+			<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h4 class="modal-title" >${I18n.user_add}</h4>
+						</div>
+						<div class="modal-body">
+							<form class="form-horizontal form" role="form" >
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_username}<font color="red">*</font></label>
+									<div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" ></div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_password}<font color="red">*</font></label>
+									<div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.system_please_input}${I18n.user_password}" maxlength="20" ></div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_role}<font color="red">*</font></label>
+									<div class="col-sm-10">
+										<input type="radio" name="role" value="0" checked />${I18n.user_role_normal}
+										&nbsp;&nbsp;&nbsp;&nbsp;
+										<input type="radio" name="role" value="1" />${I18n.user_role_admin}
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_permission}<font color="black">*</font></label>
+									<div class="col-sm-10">
+										<#if groupList?exists && groupList?size gt 0>
+											<#list groupList as item>
+												<input type="checkbox" name="permission" value="${item.id}" />${item.title}(${item.appname})<br>
+											</#list>
+										</#if>
+									</div>
+								</div>
+
+								<hr>
+								<div class="form-group">
+									<div class="col-sm-offset-3 col-sm-6">
+										<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
+										<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+									</div>
+								</div>
 
-                    <hr>
-					<div class="form-group">
-						<div class="col-sm-offset-3 col-sm-6">
-							<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
-							<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+							</form>
 						</div>
 					</div>
+				</div>
+			</div>
 
-				</form>
-         	</div>
-		</div>
-	</div>
-</div>
+			<!-- 更新.模态框 -->
+			<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h4 class="modal-title" >${I18n.user_update}</h4>
+						</div>
+						<div class="modal-body">
+							<form class="form-horizontal form" role="form" >
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_username}<font color="red">*</font></label>
+									<div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" readonly ></div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_password}<font color="red">*</font></label>
+									<div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.user_password_update_placeholder}" maxlength="20" ></div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_role}<font color="red">*</font></label>
+									<div class="col-sm-10">
+										<input type="radio" name="role" value="0" />${I18n.user_role_normal}
+										&nbsp;&nbsp;&nbsp;&nbsp;
+										<input type="radio" name="role" value="1" />${I18n.user_role_admin}
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="lastname" class="col-sm-2 control-label">${I18n.user_permission}<font color="black">*</font></label>
+									<div class="col-sm-10">
+										<#if groupList?exists && groupList?size gt 0>
+											<#list groupList as item>
+												<input type="checkbox" name="permission" value="${item.id}" />${item.title}(${item.appname})<br>
+											</#list>
+										</#if>
+									</div>
+								</div>
 
-<!-- 更新.模态框 -->
-<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"  aria-hidden="true">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-            	<h4 class="modal-title" >${I18n.user_update}</h4>
-         	</div>
-         	<div class="modal-body">
-				<form class="form-horizontal form" role="form" >
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_username}<font color="red">*</font></label>
-                        <div class="col-sm-8"><input type="text" class="form-control" name="username" placeholder="${I18n.system_please_input}${I18n.user_username}" maxlength="20" readonly ></div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_password}<font color="red">*</font></label>
-                        <div class="col-sm-8"><input type="text" class="form-control" name="password" placeholder="${I18n.user_password_update_placeholder}" maxlength="20" ></div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_role}<font color="red">*</font></label>
-                        <div class="col-sm-10">
-                            <input type="radio" name="role" value="0" />${I18n.user_role_normal}
-                            &nbsp;&nbsp;&nbsp;&nbsp;
-                            <input type="radio" name="role" value="1" />${I18n.user_role_admin}
-                        </div>
-                    </div>
-                    <div class="form-group">
-                        <label for="lastname" class="col-sm-2 control-label">${I18n.user_permission}<font color="black">*</font></label>
-                        <div class="col-sm-10">
-						<#if groupList?exists && groupList?size gt 0>
-							<#list groupList as item>
-                                <input type="checkbox" name="permission" value="${item.id}" />${item.title}(${item.appname})<br>
-							</#list>
-						</#if>
-                        </div>
-                    </div>
+								<hr>
+								<div class="form-group">
+									<div class="col-sm-offset-3 col-sm-6">
+										<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
+										<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
+										<input type="hidden" name="id" >
+									</div>
+								</div>
 
-					<hr>
-					<div class="form-group">
-                        <div class="col-sm-offset-3 col-sm-6">
-							<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
-							<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
-                            <input type="hidden" name="id" >
+							</form>
 						</div>
 					</div>
+				</div>
+			</div>
 
-				</form>
-         	</div>
-		</div>
+			<#-- biz end（4/5 content） -->
+	    </section>
 	</div>
+	<!-- right end -->
+	
+	<!-- footer -->
+	<@netCommon.commonFooter />
 </div>
 
 <@netCommon.commonScript />
+
+<#-- biz start（5/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 end（5/5 script） -->
+
 </body>
 </html>