初始化

ema-admin/src/main/resources/web/css/main.css

@@ -1,28 +1,92 @@
-/* EMA 管理后台主样式 */
+/* EMA 管理后台主样式 - 统一简洁白色风格 */
+
+/* ==================== CSS变量定义 ==================== */
+:root {
+    --primary-color: #1677ff;
+    --primary-dark: #0958d9;
+    --primary-light: #69b1ff;
+    --primary-end-color: #4096ff;
+
+    --primary-light-bg: rgba(22, 119, 255, 0.06);
+    --success-color: #52c41a;
+    --warning-color: #faad14;
+    --danger-color: #ff4d4f;
+    --info-color: #1890ff;
+
+    --header-height: 60px;
+    --footer-height: 42px;
+    --tab-height: 40px;
+    --sidebar-width: 220px;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+    --border-color: #f0f0f0;
+    --border-radius: 8px;
+    --border-radius-sm: 6px;
+    --transition-fast: 0.15s;
+    --transition-normal: 0.3s;
+}
+
+/* ==================== 基础布局 ==================== */
+body {
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: #fff;
+}
+
+/* ==================== 覆盖 LayUI 深色背景 ==================== */
+.layui-bg-black {
+    background: #fff !important;
+}
+
+/* ==================== 滚动条美化 ==================== */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #fafafa;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #e8e8e8;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #d9d9d9;
+}
 
-/* 基础布局 */
-body { overflow: hidden; }
+/* ==================== 头部样式 ==================== */
+.layui-layout-admin .layui-header {
+    background: #fff;
+}
 
-/* 头部样式 */
 .layui-header {
-    height: 60px;
-    line-height: 60px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    height: var(--header-height);
+    line-height: var(--header-height);
+    background: #fff;
+    box-shadow: none;
+    z-index: 1000;
 }
 
 .layui-logo {
     display: flex;
     align-items: center;
-    color: #fff;
-    font-size: 20px;
+    color: var(--primary-color);
+    font-size: 18px;
     font-weight: 600;
-    letter-spacing: 1px;
+    letter-spacing: 0.5px;
+    padding-left: 24px;
 }
 
 .layui-logo img {
     height: 36px;
-    margin-right: 10px;
-    border-radius: 4px;
+    margin-right: 12px;
+    border-radius: var(--border-radius-sm);
 }
 
 .layui-header .layui-nav {
@@ -30,28 +94,53 @@ body { overflow: hidden; }
 }
 
 .layui-header .layui-nav .layui-nav-item a {
-    color: #fff;
+    color: #595959;
+    transition: color var(--transition-fast);
+    font-size: 14px;
+}
+
+.layui-header .layui-nav .layui-nav-item a:hover {
+    color: var(--primary-color);
+    background: transparent;
 }
 
 .layui-header .layui-nav .layui-nav-child dd a {
-    color: #333;
+    color: #595959;
 }
 
 .layui-header .layui-nav-img {
     width: 36px;
     height: 36px;
     border-radius: 50%;
+    border: 1px solid var(--border-color);
 }
 
-/* 侧边栏 */
+/* ==================== 侧边栏 - 白色分割风格 ==================== */
 .layui-side {
-    width: 200px !important;
+    width: var(--sidebar-width) !important;
     top: 0;
-    transition: width 0.3s;
+    transition: width var(--transition-normal);
+    background: #fff;
+    box-shadow: none;
+    border-right: 1px solid #e8e8e8;
 }
 
 .layui-side-scroll {
-    width: 220px;
+    width: 240px;
+    padding: 12px 0;
+}
+
+/* 侧边栏顶部logo区域 */
+.layui-side-scroll .layui-logo {
+    height: var(--header-height);
+    line-height: var(--header-height);
+    background: #fff;
+    border-bottom: 1px solid #e8e8e8;
+    padding: 0 20px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /* 侧边栏收起状态 */
@@ -64,26 +153,155 @@ body { overflow: hidden; }
     display: none;
 }
 
-/* 收起/展开按钮 - 固定在左侧 */
+/* ==================== 菜单统一风格 ==================== */
+.layui-nav {
+    background: transparent;
+}
+
+.layui-nav-tree {
+    padding: 0 8px;
+}
+
+/* 一级菜单项 */
+.layui-nav-tree > .layui-nav-item {
+    margin: 2px 0;
+}
+
+.layui-nav-tree .layui-nav-item a {
+    height: 40px;
+    line-height: 40px;
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-fast);
+    color: #595959;
+    font-size: 14px;
+    position: relative;
+}
+
+.layui-nav-tree .layui-nav-item a:hover {
+    color: var(--primary-color);
+    background: transparent;
+}
+
+/* 选中状态 - 蓝色文字 + 左侧指示条 */
+.layui-nav-tree .layui-this,
+.layui-nav-tree .layui-nav-child dd.layui-this {
+    background: transparent !important;
+}
+
+.layui-nav-tree .layui-this > a,
+.layui-nav-tree .layui-nav-child dd.layui-this > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+    font-weight: 500;
+}
+
+.layui-nav-tree .layui-this > a:hover {
+    background: transparent !important;
+}
+
+.layui-nav-tree .layui-this > a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 0 2px 2px 0;
+}
+
+/* 展开状态 - 蓝色文字 */
+.layui-nav-tree .layui-nav-itemed > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+    font-weight: 500;
+}
+
+.layui-nav-tree .layui-nav-itemed > a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 0 2px 2px 0;
+}
+
+/* 菜单图标 */
+.layui-nav-tree .layui-icon {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+/* 子菜单 */
+.layui-nav-child {
+    background: transparent !important;
+    padding: 0;
+}
+
+.layui-nav-tree .layui-nav-child dd a {
+    padding-left: 52px !important;
+    height: 36px;
+    line-height: 36px;
+}
+
+.layui-nav-tree .layui-nav-child dd a:hover {
+    color: var(--primary-color);
+    background: transparent;
+}
+
+/* 子菜单选中 */
+.layui-nav-tree .layui-nav-child dd.layui-this > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+}
+
+.layui-nav-tree .layui-nav-child dd.layui-this > a::before {
+    content: '';
+    position: absolute;
+    left: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 16px;
+    background: var(--primary-color);
+    border-radius: 0 2px 2px 0;
+}
+
+/* 隐藏默认指示条 */
+.layui-nav-tree .layui-nav-bar {
+    display: none;
+}
+
+/* ==================== 收起/展开按钮 ==================== */
 .side-toggle {
     position: fixed;
-    left: 200px;
-    bottom: 52px;
-    width: 20px;
-    height: 40px;
-    background: #009688;
-    color: #fff;
+    left: var(--sidebar-width);
+    bottom: calc(var(--footer-height) + 12px);
+    width: 22px;
+    height: 42px;
+    background: #fff;
+    color: #8c8c8c;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
     cursor: pointer;
-    transition: left 0.3s, background-color 0.2s;
+    transition: left var(--transition-normal), color var(--transition-fast), background var(--transition-fast);
     z-index: 1001;
+    border: 1px solid var(--border-color);
+    border-left: none;
 }
 
 .side-toggle:hover {
-    background: #00b5ad;
+    background: var(--primary-light-bg);
+    color: var(--primary-color);
 }
 
 .side-toggle .layui-icon {
@@ -91,162 +309,396 @@ body { overflow: hidden; }
     font-size: 14px;
 }
 
-/* 收起状态按钮位置 - 移到左侧边缘 */
 .side-toggle.collapsed {
     left: 0;
-    border-radius: 0 4px 4px 0;
 }
 
-/* 主体内容过渡 */
+/* ==================== 主体内容 ==================== */
 .layui-body {
-    transition: left 0.3s;
+    left: var(--sidebar-width);
+    top: var(--header-height);
+    bottom: var(--footer-height);
+    overflow: hidden;
+    transition: left var(--transition-normal);
+    background: #fafafa;
+    border-left: 1px solid #e8e8e8;
+    border-top: 1px solid #e8e8e8;
 }
 
 .layui-side.layui-nav-hide ~ .layui-body {
     left: 0;
+    border-left: none;
 }
 
-.layui-nav-tree .layui-nav-item a {
-    height: 50px;
-    line-height: 50px;
-}
-
-.layui-nav-tree .layui-nav-bar {
-    width: 3px;
-}
-
-/* 主体内容 */
-.layui-body {
-    left: 200px;
-    top: 60px;
-    bottom: 42px;
-    overflow: hidden;
-}
-
-/* 标签页 */
+/* ==================== 标签页 ==================== */
 .layui-tab {
     margin: 0;
 }
 
 .layui-tab-title {
-    height: 40px;
-    background: #f2f2f2;
-    border-bottom: 1px solid #e6e6e6;
+    height: var(--tab-height);
+    background: #fff;
+    border-bottom: 1px solid #e8e8e8;
+    box-shadow: none;
 }
 
 .layui-tab-title li {
-    height: 40px;
-    line-height: 40px;
+    height: var(--tab-height);
+    line-height: var(--tab-height);
+    color: #8c8c8c;
+    font-size: 13px;
+    transition: all var(--transition-fast);
+    border-right: 1px solid #f0f0f0;
+}
+
+.layui-tab-title li:first-child {
+    border-left: none;
 }
 
 .layui-tab-title .layui-this {
+    color: var(--primary-color);
     background: #fff;
-    color: #667eea;
+    font-weight: 500;
+    border-bottom: 2px solid var(--primary-color);
 }
 
 .layui-tab-title .layui-this::after {
     border: none;
-    border-bottom: 2px solid #667eea;
 }
 
-.layui-tab-brief > .layui-tab-title .layui-this {
-    color: #667eea;
+/* 标签页关闭按钮 */
+.layui-tab-bar {
+    height: var(--tab-height);
+    line-height: var(--tab-height);
+    border-left: 1px solid #e8e8e8;
 }
 
+.layui-tab-bar i {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 50%;
+    color: #d9d9d9;
+    transition: all var(--transition-fast);
+}
+
+.layui-tab-bar i:hover {
+    background: var(--danger-color);
+    color: #fff;
+}
+
+/* 标签页内容区 */
 .layui-tab-content {
-    height: calc(100vh - 60px - 40px - 42px);
-    padding: 0;
+    height: calc(100vh - var(--header-height) - var(--tab-height) - var(--footer-height));
+    padding: 16px;
+    background: #fafafa;
 }
 
 .layui-tab-item {
     height: 100%;
+    background: #fff;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
 }
 
 .main-iframe {
     width: 100%;
     height: 100%;
     border: none;
+    border-radius: var(--border-radius);
+    background: #fff;
 }
 
-/* 底部 */
+/* ==================== 底部 ==================== */
 .layui-footer {
-    height: 42px;
-    line-height: 42px;
+    height: var(--footer-height);
+    line-height: var(--footer-height);
     text-align: center;
-    background: #f2f2f2;
-    color: #999;
+    background: #fff;
+    color: #8c8c8c;
     font-size: 12px;
+    border-top: 1px solid #e8e8e8;
 }
 
-/* 通用表格样式 */
+/* ==================== 通用表格样式 ==================== */
 .table-toolbar {
-    margin-bottom: 10px;
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
 }
 
 .table-search {
-    float: right;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .table-search .layui-input {
     height: 32px;
     line-height: 32px;
+    border-radius: var(--border-radius-sm);
 }
 
-/* 表单样式优化 */
+/* ==================== 表单样式 ==================== */
 .layui-form-item .layui-form-label {
     width: 100px;
+    font-weight: 500;
+    color: #595959;
 }
 
 .layui-form-item .layui-input-inline {
     width: 200px;
 }
 
-/* 弹窗优化 */
-.layui-layer-title {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.layui-input,
+.layui-textarea {
+    border-radius: var(--border-radius-sm);
+    border-color: #d9d9d9;
+    transition: border-color var(--transition-fast);
+}
+
+.layui-input:focus,
+.layui-textarea:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+}
+
+/* ==================== 按钮样式 ==================== */
+.layui-btn {
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-fast);
+    font-weight: 500;
+}
+
+.layui-btn-primary {
+    border: 1px solid #d9d9d9;
+    background: #fff;
+    color: #595959;
+}
+
+.layui-btn-primary:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+}
+
+.layui-btn-normal {
+    background: var(--primary-color);
+    border: none;
     color: #fff;
+}
+
+.layui-btn-normal:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+}
+
+.layui-btn:active {
+    transform: translateY(0);
+}
+
+/* ==================== 弹窗优化 ==================== */
+.layui-layer-title {
+    background: #fff;
+    color: #262626;
     border: none;
+    font-weight: 600;
+    font-size: 15px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.layui-layer-btn a:first-child {
+    background: var(--primary-color) !important;
+    border: none !important;
+}
+
+.layui-layer-dialog {
+    border-radius: var(--border-radius) !important;
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+}
+
+.layui-layer-setwin .layui-layer-close1 {
+    color: #8c8c8c;
+}
+
+.layui-layer-setwin .layui-layer-close1:hover {
+    color: #595959 !important;
 }
 
-/* 图标菜单 */
+/* ==================== 图标样式 ==================== */
 .layui-icon {
-    margin-right: 5px;
+    margin-right: 6px;
+    font-size: 16px;
+    vertical-align: middle;
 }
 
-/* 加载动画 */
+/* ==================== 加载动画 ==================== */
 .loading-mask {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.98);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+    gap: 16px;
 }
 
-/* 空状态 */
+.loading-spinner {
+    width: 36px;
+    height: 36px;
+    border: 2px solid #f0f0f0;
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ==================== 空状态 ==================== */
 .empty-state {
     text-align: center;
     padding: 60px 20px;
-    color: #999;
+    color: #8c8c8c;
 }
 
 .empty-state i {
-    font-size: 60px;
-    margin-bottom: 20px;
-    color: #ddd;
+    font-size: 64px;
+    margin-bottom: 16px;
+    color: #d9d9d9;
+}
+
+.empty-state p {
+    font-size: 14px;
+    margin-top: 8px;
+}
+
+/* ==================== 卡片样式 ==================== */
+.card {
+    background: #fff;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-fast);
+    border: 1px solid var(--border-color);
+}
+
+.card:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.card-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: 600;
+    color: #262626;
+    font-size: 15px;
+}
+
+.card-body {
+    padding: 20px;
+}
+
+/* ==================== 徽章/标签 ==================== */
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 12px;
+    border-radius: 4px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+.badge-primary {
+    background: var(--primary-light-bg);
+    color: var(--primary-color);
 }
 
-/* 响应式 */
+.badge-success {
+    background: rgba(82, 196, 26, 0.1);
+    color: var(--success-color);
+}
+
+.badge-warning {
+    background: rgba(250, 173, 20, 0.1);
+    color: var(--warning-color);
+}
+
+.badge-danger {
+    background: rgba(255, 77, 79, 0.1);
+    color: var(--danger-color);
+}
+
+/* ==================== 分页样式 ==================== */
+.layui-laypage .layui-laypage-curr .layui-laypage-em {
+    background: var(--primary-color);
+    border-radius: var(--border-radius-sm);
+}
+
+.layui-laypage a,
+.layui-laypage span {
+    border-radius: var(--border-radius-sm);
+}
+
+/* ==================== 响应式 ==================== */
 @media screen and (max-width: 768px) {
     .layui-side {
         display: none;
     }
-    
+
     .layui-body {
         left: 0;
     }
+
+    .side-toggle {
+        display: none;
+    }
+}
+
+/* ==================== 动画效果 ==================== */
+.fade-in {
+    animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-in {
+    animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+    from { opacity: 0; transform: translateX(-16px); }
+    to { opacity: 1; transform: translateX(0); }
 }
+
+/* ==================== 工具类 ==================== */
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-primary { color: var(--primary-color); }
+.text-success { color: var(--success-color); }
+.text-warning { color: var(--warning-color); }
+.text-danger { color: var(--danger-color); }
+.text-muted { color: #8c8c8c; }
+
+.mt-10 { margin-top: 10px; }
+.mt-16 { margin-top: 16px; }
+.mb-10 { margin-bottom: 10px; }
+.mb-16 { margin-bottom: 16px; }
+.p-16 { padding: 16px; }
+
+.flex { display: flex; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.gap-8 { gap: 8px; }
+.gap-16 { gap: 16px; }

ema-admin/src/main/resources/web/css/theme-blue.css

@@ -1,44 +1,296 @@
-/* 蓝色主题 */
-.layui-logo,
-.layui-header,
-.layui-tab-title .layui-this,
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+/* 统一白色简洁主题 - EMA管理系统 */
+
+/* ==================== 主色调 ==================== */
+:root {
+    --primary-color: #1677ff;
+    --primary-dark: #0958d9;
+    --primary-light-bg: rgba(22, 119, 255, 0.06);
+}
+
+/* ==================== Logo & 头部 ==================== */
+.layui-logo {
+    color: var(--primary-color);
+}
+
+.layui-header {
+    background: #fff;
+}
+
+/* ==================== 按钮 ==================== */
+.layui-btn-primary {
+    border: 1px solid #d9d9d9;
+    background: #fff;
+    color: #595959;
+}
+
+.layui-btn-primary:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 }
 
-/* 按钮 */
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.layui-btn-normal {
+    background: var(--primary-color);
     border: none;
     color: #fff;
 }
 
-.btn-primary:hover {
-    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
+.layui-btn-normal:hover {
+    background: var(--primary-dark);
 }
 
-/* 表格选中行 */
-.layui-table tr.table-selected {
-    background-color: rgba(102, 126, 234, 0.1);
+/* ==================== 表单 ==================== */
+.layui-form-select dl dd.layui-this {
+    background: var(--primary-color);
 }
 
-/* 侧边栏选中 */
-.layui-nav-tree .layui-nav-itemed > a,
-.layui-nav-tree .layui-this > a {
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
+.layui-laydate .layui-this .layui-laydate-mirror {
+    background: var(--primary-color) !important;
+    color: #fff !important;
 }
 
-/* 边框 */
-.layui-border-theme {
-    border-color: #667eea;
+/* ==================== 表格 ==================== */
+.layui-table thead tr {
+    background: #fafafa;
+}
+
+.layui-table th {
+    font-weight: 600;
+    color: #262626;
+}
+
+.layui-table-hover,
+.layui-table tbody tr:hover {
+    background: var(--primary-light-bg) !important;
+}
+
+.layui-table tr.table-selected,
+.layui-table tbody tr.table-selected:hover {
+    background: var(--primary-light-bg) !important;
+}
+
+.layui-table-sort {
+    color: var(--primary-color);
+}
+
+/* ==================== 侧边栏 - 统一蓝色指示条风格 ==================== */
+/* 选中状态 - 蓝色文字 + 左侧指示条 */
+.layui-nav-tree .layui-this,
+.layui-nav-tree .layui-nav-child dd.layui-this {
+    background: transparent !important;
+}
+
+.layui-nav-tree .layui-this > a,
+.layui-nav-tree .layui-nav-child dd.layui-this > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+    font-weight: 500;
+}
+
+.layui-nav-tree .layui-this > a:hover {
+    background: transparent !important;
 }
 
-/* 文字颜色 */
-.text-primary {
-    color: #667eea !important;
+.layui-nav-tree .layui-this > a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 0 2px 2px 0;
 }
 
-/* 分页选中 */
+/* 一级菜单展开 - 蓝色文字 + 左侧指示条 */
+.layui-nav-tree .layui-nav-itemed > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+    font-weight: 500;
+}
+
+.layui-nav-tree .layui-nav-itemed > a::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 0 2px 2px 0;
+}
+
+/* 菜单悬停 */
+.layui-nav-tree .layui-nav-item a:hover {
+    color: var(--primary-color);
+    background: transparent;
+}
+
+/* 子菜单悬停 */
+.layui-nav-tree .layui-nav-child dd a:hover {
+    color: var(--primary-color);
+    background: transparent;
+}
+
+/* 子菜单选中 */
+.layui-nav-tree .layui-nav-child dd.layui-this > a {
+    color: var(--primary-color) !important;
+    background: transparent !important;
+}
+
+/* ==================== 标签页 ==================== */
+.layui-tab-title .layui-this {
+    color: var(--primary-color);
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.layui-tab-title .layui-this::after {
+    border: none;
+}
+
+.layui-tab-bar i:hover {
+    background: #ff4d4f !important;
+    color: #fff !important;
+}
+
+/* ==================== 分页 ==================== */
 .layui-laypage .layui-laypage-curr .layui-laypage-em {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: var(--primary-color);
+    border-radius: 6px;
+}
+
+.layui-laypage .layui-laypage-a:hover {
+    color: var(--primary-color);
+}
+
+/* ==================== 弹窗 ==================== */
+.layui-layer-title {
+    background: #fff;
+    color: #262626;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.layui-layer-btn a:first-child {
+    background: var(--primary-color) !important;
+    border: none !important;
+}
+
+.layui-layer-btn a:first-child:hover {
+    background: var(--primary-dark) !important;
+}
+
+.layui-layer-setwin .layui-layer-close1:hover {
+    color: #595959 !important;
+}
+
+/* ==================== 边框 ==================== */
+.layui-border-theme {
+    border-color: var(--primary-color) !important;
+}
+
+/* ==================== 文字颜色 ==================== */
+.text-primary,
+.layui-text-primary {
+    color: var(--primary-color) !important;
+}
+
+.text-success,
+.layui-text-success {
+    color: #52c41a !important;
+}
+
+.text-warning,
+.layui-text-warning {
+    color: #faad14 !important;
+}
+
+.text-danger,
+.layui-text-danger {
+    color: #ff4d4f !important;
+}
+
+/* ==================== 徽章 ==================== */
+.layui-badge,
+.layui-badge-rim {
+    background: var(--primary-color);
+    color: #fff;
+}
+
+.layui-badge-dot {
+    background: var(--primary-color);
+}
+
+/* ==================== 进度条 ==================== */
+.layui-progress-bar {
+    background: var(--primary-color);
+}
+
+/* ==================== 开关 ==================== */
+.layui-form-switch:checked {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+/* ==================== 复选框 ==================== */
+.layui-form-checked[lay-filter=""] {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.layui-form-checked:hover {
+    border-color: var(--primary-color);
+}
+
+/* ==================== 单选框 ==================== */
+.layui-form-radioed > i,
+.layui-form-radioed:hover > i {
+    color: var(--primary-color);
+}
+
+/* ==================== 卡片 ==================== */
+.layui-card {
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+    border: 1px solid #e8e8e8;
+}
+
+.layui-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.layui-card-header {
+    border-bottom-color: #e8e8e8;
+    font-weight: 600;
+}
+
+/* ==================== 面包屑 ==================== */
+.layui-breadcrumb a:hover {
+    color: var(--primary-color);
+}
+
+/* ==================== 下拉菜单 ==================== */
+.layui-dropdown .layui-menu {
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e8e8e8;
+}
+
+.layui-dropdown-menu .layui-menu li:hover {
+    background: var(--primary-light-bg);
+}
+
+/* ==================== 滑块 ==================== */
+.layui-slider-wrap-btn {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+/* ==================== 树形组件 ==================== */
+.layui-tree-set .layui-tree-entry:hover {
+    background: var(--primary-light-bg);
+}
+
+.layui-tree-set.layui-tree-checked .layui-tree-entry {
+    background: var(--primary-light-bg);
 }