🎨 样式定制

ThinkAdmin 提供完善的样式定制功能，基于 Less 预处理器实现样式的二次修改和编译。

🚀 主要功能

• Less 支持: 基于 Less 预处理器进行样式开发
• 二次修改: 支持对现有样式进行二次修改
• 自动编译: 支持 Less 到 CSS 的自动编译
• 主题定制: 支持主题样式的自定义
• 响应式设计: 支持响应式样式的定制
• 开发友好: 提供友好的样式开发环境

⚠️ 重要提示

编译要求: 样式修改之后需要重新使用 lessc 编译生成 css 文件，并清除浏览器缓存！

Node.js 环境: 需要安装 Node.js 环境，确保可以执行 npm 指令。

📋 技术架构

Less 预处理器

• 编译生成: 后台管理界面样式由 lessc 编译生成
• 二次修改: 支持对现有样式进行二次修改
• 变量支持: 支持 Less 变量和混入功能
• 嵌套语法: 支持 Less 的嵌套语法

编译环境

• Node.js: 需要安装 Node.js 环境
• npm 支持: 确保可以执行 npm 指令
• 依赖管理: 通过 package.json 管理依赖
• 构建脚本: 提供便捷的构建脚本

🔧 开发流程

1. 环境准备

• 安装 Node.js: 确保可以执行 npm 指令
• 进入目录: 进入样式目录 public/static/theme/css/
• 检查文件: 确认存在 package.json 文件

2. 依赖安装

cd public/static/theme/css/
npm install

3. 样式编译

npm run build

4. 缓存清理

• 浏览器缓存: 清除浏览器缓存（Ctrl+F5 强制刷新）
• CDN 缓存: 清除 CDN 缓存（如果使用）
• 服务器缓存: 清除服务器缓存（删除 runtime/cache 目录）

💡 实际应用示例

修改主题颜色

// public/static/theme/css/variables.less

// 修改主色调
@primary-color: #1890ff;  // 原色
@primary-color: #52c41a;  // 修改为绿色

// 修改成功色
@success-color: #52c41a;

// 修改警告色
@warning-color: #faad14;

// 修改错误色
@error-color: #f5222d;

自定义组件样式

// public/static/theme/css/custom.less

// 自定义卡片样式
.layui-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .layui-card-header {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }
}

// 自定义按钮样式
.layui-btn-primary {
    background-color: #1890ff;
    border-color: #1890ff;
    
    &:hover {
        background-color: #40a9ff;
        border-color: #40a9ff;
    }
}

编译命令

# 进入样式目录
cd public/static/theme/css/

# 安装依赖（首次）
npm install

# 编译样式
npm run build

# 监听文件变化自动编译（开发模式）
npm run watch

样式文件结构

public/static/theme/css/
├── variables.less      # 变量定义文件
├── mixins.less        # 混入函数文件
├── components.less    # 组件样式文件
├── layout.less        # 布局样式文件
├── custom.less        # 自定义样式文件（可在此添加自定义样式）
├── main.less          # 主样式文件（引入所有样式）
├── package.json       # npm 配置文件
└── console.css        # 编译后的 CSS 文件

⚠️ 注意事项

样式覆盖

• 优先级: 自定义样式会覆盖默认样式
• 命名空间: 建议使用特定的类名前缀避免冲突
• 兼容性: 确保自定义样式在不同浏览器中正常显示

性能优化

• 合并文件: 将多个 Less 文件合并编译成一个 CSS 文件
• 压缩输出: 生产环境使用压缩后的 CSS 文件
• 缓存策略: 合理设置 CSS 文件的缓存时间