NOCC 主题样式配置管理

使用

• package.json 添加配置项："type": "module"
• ApplyTheme 方法返回的对象传递给 n-config-provider 组件的 theme-overrides 属性
• vite.config.js 中引入并使用资源插件 @hw_dev/nocc-web-theme/plugin.js

方法

ApplyTheme

import { ApplyTheme } from '@hw_dev/nocc-web-theme'
// 预设了 blue green 两种主题，可以通过 MixinTheme 扩展更多
ApplyTheme('blue')

// 临时扩展主题，参数都可选
import THEME from 'theme.json'
// inline 方式引入 css 以免被插入到 DOM 当中
import STYLE from 'style.styl?inline'
ApplyTheme('blue', THEME, STYLE)

MixinTheme

import { MixinTheme, ApplyTheme } from '@hw_dev/nocc-web-theme'

import THEME from 'theme.json'
import STYLE from 'style.styl?inline'
// 混合新的主题，或者扩展原有主题，扩展后会覆盖原主题配置
MixinTheme('red', THEME, STYLE)
MixinTheme('blue', THEME, STYLE)

// 混合后不会应用主题，需要手动进行应用
ApplyTheme('red')
ApplyTheme('blue')

维护

• 参照下方的文件结构修改对应部分的样式与配置
• 新增主题配置时需要修改 index.js，参照已有主题进行新增配置

.
├─ dist，构建结果目录，实际使用的文件
│
├─ fonts，字体文件目录
│  ├─ din_condensed，展示类数字
│  └─ source_hans_regular，思源黑
│
├─ image，图片素材目录
│
├─ style，基础样式目录
│  ├─ index.styl，通用工具样式
│  ├─ mobile.json，naive-ui 的移动端变量配置
│  ├─ naive.styl，naive-ui 的样式调整
│  ├─ theme.json，naive-ui 的变量配置
│  └─ theme.styl，涉及主题的公共样式部分
│
├─ theme，主题样式目录，内容以主题命名，两个一组构成配置
│  ├─ [color].json，主题变量配置
│  └─ [color].styl，主题样式调整，不便通过变量控制的样式覆盖部分
│
├─ i18n.js，语言文本配置部分
├─ index.js，主题配置部分
├─ utils.js，主题管理逻辑
└─ plugin.js，供项目使用的 Vite 插件，用于同步公共资源

发布

npm i nrm -g   # 通过 nrm 管理源
nrm use npm    # 使用 npm 源
npm login      # 首次使用需要先登录 npm 帐号
npm run build  # 构建生产版本
npm publish    # 每次推送前须在 package.json 中更新版本号