From 67402126f75c33065bc35081a319fbb2f6bb015a Mon Sep 17 00:00:00 2001
From: xuxueli <931591021@qq.com>
Date: Wed, 19 Nov 2025 14:15:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E6=B7=BB=E5=8A=A0=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E4=B8=BB=E9=A2=98=E7=9A=AE=E8=82=A4=E9=80=89=E9=A1=B9?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 Green、Red 和 Yellow 主题皮肤
- 重新组织主题列表结构，按层级分组显示
- 调整主题皮肤数组顺序，确保加载逻辑正确
- 优化主题预览样式，统一背景色类名使用
- 修复部分 HTML 标签属性格式问题
- 统一代码缩进风格，提升可读性
---
 .../static/biz/common/admin.setting.js        | 59 ++++++++++++++-----
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/xxl-job-admin/src/main/resources/static/biz/common/admin.setting.js b/xxl-job-admin/src/main/resources/static/biz/common/admin.setting.js
index f1a4f99a..33b56b07 100644
--- a/xxl-job-admin/src/main/resources/static/biz/common/admin.setting.js
+++ b/xxl-job-admin/src/main/resources/static/biz/common/admin.setting.js
@@ -224,21 +224,22 @@ $(function(){
                     <div class="modal-body">
                         <!-- 主题列表 -->
                         <ul class="list-unstyled clearfix" >
+                            <!-- level 1 -->
                             <li style="float:left; width: 33.33333%; padding: 5px;">
                                 <a href="javascript:" data-skin='skin-blue' style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
-                                    <span style='display:block; width: 20%; float: left; height: 13px; background: #367fa9;'></span>
-                                    <span style='display:block; width: 80%; float: left; height: 13px; background: #367fa9;'></span>
-                                    <span style='display:block; width: 20%; float: left; height: 30px; background: #222d32;'></span>
-                                    <span style='display:block; width: 80%; float: left; height: 30px; background: #f4f5f7;'></span>
+                                    <span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
+                                    <span style="width: 80%; float: left; height: 13px;" class='bg-light-blue'></span>
+                                    <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+                                    <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
                                 </a>
                                 <p class="text-center">Blue</p>
                             </li>
                             <li style="float:left; width: 33.33333%; padding: 5px;">
                                 <a href="javascript:" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
-                                    <span style='display:block; width: 20%; float: left; height: 13px; background: #fefefe;'></span>
-                                    <span style='display:block; width: 80%; float: left; height: 13px; background: #fefefe;'></span>
-                                    <span style='display:block; width: 20%; float: left; height: 30px; background: #222;'></span>
-                                    <span style='display:block; width: 80%; float: left; height: 30px; background: #f4f5f7;'></span>
+                                    <span style="width: 20%; float: left; height: 13px; background: #fefefe"></span>
+                                    <span style="width: 80%; float: left; height: 13px; background: #fefefe"></span>
+                                    <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+                                    <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
                                 </a>
                                 <p class="text-center">Black</p>
                             </li>
@@ -252,6 +253,36 @@ $(function(){
                                 <p class="text-center">Purple</p>
                             </li>
                             
+                            <!-- level 2 -->
+                            <li style="float:left; width: 33.33333%; padding: 5px;">
+                                <a href="javascript:" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                                    <span style="width: 20%; float: left; height: 13px;" class='bg-green-active'></span>
+                                    <span style="width: 80%; float: left; height: 13px;" class='bg-green'></span>
+                                    <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+                                    <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+                                </a>
+                                <p class="text-center">Green</p>
+                            </li>
+                            <li style="float:left; width: 33.33333%; padding: 5px;">
+                                <a href="javascript:" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                                    <span style="width: 20%; float: left; height: 13px;" class='bg-red-active'></span>
+                                    <span style="width: 80%; float: left; height: 13px;" class='bg-red'></span>
+                                    <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+                                    <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+                                </a>
+                                <p class="text-center">Red</p>
+                            </li>
+                            <li style="float:left; width: 33.33333%; padding: 5px;">
+                                <a href="javascript:" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                                    <span style="width: 20%; float: left; height: 13px;" class='bg-yellow-active'></span>
+                                    <span style="width: 80%; float: left; height: 13px;" class='bg-yellow'></span>
+                                    <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+                                    <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+                                </a>
+                                <p class="text-center">Yellow</p>
+                            </li>
+                            
+                            <!-- level 3 -->
                             <li style="float:left; width: 33.33333%; padding: 5px;">
                                 <a href="javascript:" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                                     <span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
@@ -280,6 +311,7 @@ $(function(){
                                 <p class="text-center">Purple(Light)</p>
                             </li>
                             
+                            <!-- level 4 -->
                             <li style="float:left; width: 33.33333%; padding: 5px;">
                                 <a href="javascript:" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                                     <span style="width: 20%; float: left; height: 13px;" class='bg-green-active'></span>
@@ -289,7 +321,6 @@ $(function(){
                                 </a>
                                 <p class="text-center">Green(Light)</p>
                             </li>
-                            
                             <li style="float:left; width: 33.33333%; padding: 5px;">
                                 <a href="javascript:" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                                     <span style="width: 20%; float: left; height: 13px;" class='bg-red-active'></span>
@@ -336,16 +367,16 @@ $(function(){
     var skins = [
         "skin-blue",
         "skin-black",
-        "skin-red",
-        "skin-yellow",
         "skin-purple",
         "skin-green",
+        "skin-red",
+        "skin-yellow",
         "skin-blue-light",
         "skin-black-light",
-        "skin-red-light",
-        "skin-yellow-light",
         "skin-purple-light",
-        "skin-green-light"
+        "skin-green-light",
+        "skin-red-light",
+        "skin-yellow-light"
     ];
 
     /**