DarkM

# 皮肤机制

DarkM 提供了灵活的皮肤机制，支持多套皮肤切换和自定义皮肤开发。

# 📋 核心概念

术语 说明 示例
皮肤 布局相关 菜单宽度、是否有顶部导航栏
主题 色彩相关 导航栏背景色、菜单激活色
字号 大小相关 按钮大小、文字大小

# 🎨 内置皮肤

皮肤 说明 NPM 包
Pretty 精美皮肤（默认） darkm-skins-pretty
Classics 经典皮肤 darkm-skins-classics
Pithy 简约皮肤（第三方） darkm-skins-pithy

# 🚀 使用方法

# 方式一：直接使用 DarkM.UI

import DarkMUI from 'darkm-ui'
import darkmSkinsClassics from 'darkm-skins-classics'

// 注册皮肤
DarkMUI.registerSkin(darkmSkinsClassics)
1
2
3
4
5

# 方式二：使用 Admin 模块

import WebHost from 'darkm-module-admin'
import darkmSkinsClassics from 'darkm-skins-classics'
import config from './config'

// 注册皮肤
WebHost.registerSkin(darkmSkinsClassics)
WebHost.start(config)
1
2
3
4
5
6
7

# 🎭 切换皮肤

# 方法一：API 切换

// 切换到 Classics 皮肤
this.$darkm.setSkin('classics')

// 获取当前皮肤
const currentSkin = this.$darkm.getCurrentSkin()
1
2
3
4
5

# 方法二：组件切换

<template>
  <NmSkinToggle />
  <!-- 或使用连字符格式（推荐） -->
  <nm-skin-toggle />
</template>
1
2
3
4
5

提示：组件名支持驼峰格式（NmSkinToggle）和连字符格式（nm-skin-toggle），系统推荐使用连字符格式。

# 方法三：设置页面

在系统配置页面选择皮肤。

# 🛠️ 自定义皮肤

# 步骤 1：创建皮肤项目

# 克隆参考项目
git clone https://glab.woowis.com/Woowis/DarkM.Skins.Classics.git
cd DarkM.Skins.Classics

# 安装依赖
npm install
1
2
3
4
5
6

# 步骤 2：修改皮肤配置

// src/index.js
export default {
  name: 'my-skin',
  label: '我的皮肤',
  // 皮肤配置
  layout: {
    sidebarWidth: 220,
    hasTopNav: true
  },
  // 主题配置
  theme: {
    primaryColor: '#409EFF',
    sidebarBgColor: '#304156'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 步骤 3：构建发布

# 构建
npm run build

# 发布到 NPM
npm run pub
1
2
3
4
5

# 步骤 4：使用自定义皮肤

import mySkin from 'my-skin'
WebHost.registerSkin(mySkin)
1
2

# 📚 参考链接

最后更新: 2022-08-07

← 自定义登录页 →