🎨 样式定制

ThinkAdmin 的后台主题样式位于静态插件中，提供 Less 源文件和已编译的 CSS 文件，适合在保留默认结构的基础上做样式二次调整。

🚀 主要功能

Less 支持: 静态主题样式保留 Less 源文件
二次修改: 支持对现有样式进行二次修改
命令编译: 通过 npm run build 编译 Less 到 CSS
主题定制: 支持主题样式的自定义
移动样式: 提供独立的 mobile.less 与 mobile.css
扩展样式: 可通过 _custom.less 增加项目自定义样式

⚠️ 重要提示

编译要求: 修改 Less 文件之后需要在样式目录执行 npm run build，重新生成 css 与 css.map 文件，并清除浏览器缓存。

Node.js 环境: 需要安装 Node.js 环境，确保可以执行 npm 指令。当前 package.json 提供 install 与 build 两个脚本，没有内置 watch 监听脚本。

📋 技术架构

Less 预处理器

编译生成: 后台管理界面样式由 lessc 编译生成
二次修改: 支持对现有样式进行二次修改
变量支持: _config.less 提供布局、颜色、阴影等变量和混入
嵌套语法: 支持 Less 的嵌套语法

编译环境

Node.js: 需要安装 Node.js 环境
npm 支持: 确保可以执行 npm 指令
依赖安装: package.json 的 install 脚本会安装 less 与 less-plugin-clean-css
构建脚本: build 脚本会编译 login.less、mobile.less、console.less、iconfont.less

🔧 开发流程

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/_config.less

// 左侧菜单激活颜色
@LeftMainNavActiveBackColor: #098;
@LeftMainNavActiveTextColor: #FFF;

// 顶部导航颜色
@TopHeaderTextColor: #333;
@TopHeaderBackColor: #FFF;

// 页面背景颜色
@BodyMainBackColor: #EFEFEF;

自定义组件样式

// 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

样式文件结构

public/static/theme/css/
├── _config.less        # 变量与混入配置
├── _custom.less        # 项目自定义样式入口
├── _display.less       # 常用显示与工具样式
├── _layout*.less       # 后台布局与主题样式
├── console.less        # 后台主样式入口
├── login.less          # 登录页样式入口
├── mobile.less         # 移动端样式入口
├── iconfont.less       # 图标字体样式入口
├── package.json        # npm 脚本配置
├── console.css         # 编译后的后台主样式
├── login.css           # 编译后的登录页样式
├── mobile.css          # 编译后的移动端样式
└── iconfont.css        # 编译后的图标字体样式

⚠️ 注意事项

样式覆盖

优先级: _custom.less 会被编译进 console.css，但在 console.less 中早于 _display.less 和 _layout.less 引入；若需要覆盖后续主题规则，应提高选择器优先级，或把最终覆盖样式放到 public/static/extra/style.css
命名空间: 建议使用特定的类名前缀避免冲突
兼容性: 确保自定义样式在不同浏览器中正常显示

性能优化

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