Feat: 多主题构建支持

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## v 0.3.0
+
+- 支持多主题构建
+
 ## v 0.2.0
 
 - 升级到 @vue/cli 4.1.1

README.md

@@ -43,6 +43,7 @@ git config core.ignorecase false # 使git对文件名大小写敏感
 
 ```bash
 yarn dev # --port 9876 : 本次启动使用9876端口 (可以在 .env.development.local 文件中设置)
+yarn dev --mode=production # 调试多主题切换
 ```
 
 ### 构建项目(生成部署文件)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-tpl",
   "author": "毛瑞 <[email protected]>",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "license": "MIT",
   "keywords": [
@@ -21,7 +21,7 @@
   },
   "scripts": {
     "dev": "npx --max_old_space_size=4096 vue-cli-service serve --open",
-    "lint": "npx --max_old_space_size=4096 stylelint **/*.vue **/*.scss **/*.css --cache --cache-location node_modules/.cache/stylelint/ --fix && npx --max_old_space_size=4096 vue-cli-service lint --fix",
+    "lint": "npx --max_old_space_size=4096 stylelint **/*.vue **/*.scss **/*.css --cache --cache-location node_modules/.cache/stylelint/ --fix & npx --max_old_space_size=4096 vue-cli-service lint --fix",
     "build": "npx --max_old_space_size=4096 vue-cli-service build --no-unsafe-inline",
     "test:e2e": "npx --max_old_space_size=4096 vue-cli-service test:e2e",
     "test:unit": "npx --max_old_space_size=4096 vue-cli-service test:unit --detectOpenHandles --coverage"
@@ -81,7 +81,7 @@
     "fibers": "^4.0.2",
     "hard-source-webpack-plugin": "^0.13.1",
     "lint-staged": "^9.5.0",
-    "mini-css-extract-plugin": "Maorey/alternate-css-extract-plugin#22acea3",
+    "mini-css-extract-plugin": "Maorey/alternate-css-extract-plugin#d246d64ea",
     "regenerate": "^1.4.0",
     "regjsgen": "^0.5.1",
     "regjsparser": "^0.6.1",

src/pages/index/App.vue

@@ -85,7 +85,7 @@ export default class extends Vue {
   }
 
   get SKIN() {
-    return ['light', 'dark', 'grey']
+    return ['light', 'dark']
   }
 
   get skin() {

src/theme/dark/_colors.scss

@@ -3,8 +3,50 @@
  * @Author: 毛瑞
  * @Date: 2019-07-06 08:30:59
  */
-/// 背景色 ///
-$colorBackGround: #cfcfcf;
+/// 常用颜色 ///
+$colorBlank: #fff; // 黑色
+$colorWhite: #000; // 白色
+$colorTransparent: #0000; // 透明
+
+// 【主题色】
+$colorTheme: #40d2ff;
+$colorTheme1: mix($colorWhite, $colorTheme, 10%);
+$colorTheme2: mix($colorWhite, $colorTheme, 20%);
+$colorTheme3: mix($colorWhite, $colorTheme, 30%);
+$colorTheme4: mix($colorWhite, $colorTheme, 40%);
+$colorTheme5: mix($colorWhite, $colorTheme, 50%);
+$colorTheme6: mix($colorWhite, $colorTheme, 60%);
+$colorTheme7: mix($colorWhite, $colorTheme, 70%);
+$colorTheme8: mix($colorWhite, $colorTheme, 80%);
+$colorTheme9: mix($colorWhite, $colorTheme, 90%);
+
+// 【辅助色】
+$colorSuccess: #3ac25c;
+$colorSuccess1: mix($colorWhite, $colorSuccess, 80%);
+$colorSuccess2: mix($colorWhite, $colorSuccess, 90%);
+
+$colorWarn: #dbe63c;
+$colorWarn1: mix($colorWhite, $colorWarn, 80%);
+$colorWarn2: mix($colorWhite, $colorWarn, 90%);
+
+$colorDanger: #f56c6c;
+$colorDanger1: mix($colorWhite, $colorDanger, 80%);
+$colorDanger2: mix($colorWhite, $colorDanger, 90%);
 
-/// 文本 ///
-$colorTextCommon: #0d1a25;
+$colorInfo: #969099;
+$colorInfo1: mix($colorWhite, $colorInfo, 80%);
+$colorInfo2: mix($colorWhite, $colorInfo, 90%);
+
+// 【中性色】
+$colorTextMain: #c0c4cc; // 主要文字
+$colorTextCommon: #909399; // 常规文字
+$colorTextMinor: #606266; // 次要文字
+$colorTextHolder: #3b3b3b; // 占位文字
+
+$colorBorderLv1: #3b3b3b; // 一级边框
+$colorBorderLv2: #3c3c3c; // 二级边框
+$colorBorderLv3: #3d3d3d; // 三级边框
+$colorBorderLv4: #3e3e3e; // 四级边框
+
+/// 背景色 ///
+$colorBackGround: #f1f8ff;

src/theme/dark/index.scss

@@ -1,6 +1,51 @@
-/** 深色主题
-*/
-@import '~@/theme/light'; // 浅色主题
-
+/*
+ * @Description: 全局scss变量
+ *  【此文件中请勿出现具体样式，否则会打包到!所有!css chunk中】
+ *  【在此文件中导出的变量会混合到!所有!scss的导出中】
+ *  【请使用命名空间或规划好命名方式以避免变量名冲突】
+ * @Author: 毛瑞
+ * @Date: 2019-06-19 11:34:44
+ */
 /// 变量 (私有变量 _+camelCase)///
-@import './colors'; // 颜色
+@import './colors'; // 颜色 【colorCase】: colorRed
+@import '../light/border'; // 边框 【(border|shadow)Case】: borderSolidWidth
+@import '../light/fontSIzes'; // 字号 【cssCase】: xSmaller、xxxLarge
+@import '../light/zIndexes'; // z-index层级划分 【zCase】: zMessage
+@import '../light/layout'; // 固定布局尺寸 【(height|width)Case】: heightHeader、widthLfetColumn
+@import '../light/scrollBar'; // 滚动条变量 【scrollBarCase】
+@import '../light/icon'; // 字体图标变量 【iconCase】
+
+/* ---------------------- 我是一条分割线 (灬°ω°灬) ---------------------- */
+
+/// 扩展（@extend %ellipsis;） ///
+
+// 单行文本溢出省略号
+%ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// 在页面居中【需要指定高宽】
+%centerPage {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+}
+
+/* ---------------------- 我也是一条分割线 (*❦ω❦) ---------------------- */
+
+/// 混入（@include name(args);） ///
+
+// 多行溢出省略号(-webkit-有效，其它截断) 参数为行数
+@mixin ellipsis($clamp) {
+  // -webkit-多行溢出省略号
+  -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
+  -webkit-line-clamp: $clamp;
+  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+  overflow: hidden;
+  word-break: break-word;
+}

src/utils/performance.ts

@@ -1,7 +1,7 @@
-/** 性能优化相关工具
+/** 性能优化相关工具函数
  */
 
-/** 节流 (指定时间间隔内最多执行一次函数 立即执行)
+/** 节流 (指定时间间隔内最多执行一次函数 延迟执行)
  * @test true
  *
  * @param {Function} fn 目标函数
@@ -11,21 +11,26 @@
  */
 function throttle(fn: Function, interval: number) {
   let runable = true
+
+  let _this: any
+  let _arg: any
   const FN = () => {
+    fn.apply(_this, _arg)
     runable = true
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   return function(this: any, ..._args: any[]) {
+    _this = this
+    _arg = arguments
+
     if (runable) {
       runable = false
       setTimeout(FN, interval)
-      fn.apply(this, arguments)
     }
   }
 }
-
-/** 防抖 (限制函数最小执行间隔 立即执行)
+/** 防抖 (限制函数最小执行间隔 延迟执行)
  * @test true
  *
  * @param {Function} fn 目标函数
@@ -35,63 +40,72 @@ function throttle(fn: Function, interval: number) {
  */
 function debounce(fn: Function, interval: number) {
   let timer: number
-  let runable = true
+
+  let _this: any
+  let _arg: any
   const FN = () => {
-    runable = true
+    fn.apply(_this, _arg)
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   return function(this: any, ..._args: any[]) {
-    if (runable) {
-      runable = false
-      fn.apply(this, arguments)
-    }
+    _this = this
+    _arg = arguments
+
     clearTimeout(timer)
     timer = setTimeout(FN, interval)
   }
 }
 
-/** 节流 (指定时间间隔内最多执行一次函数 延迟执行)
+/** 节流 (指定时间间隔内最多执行一次函数 立即执行)
  * @test true
  *
  * @param {Function} fn 目标函数
  * @param {Number} interval 间隔(ms)
  *
  * @returns {Function} 目标函数包装
  */
-function throttleDelay(fn: Function, interval: number) {
+function throttleAtOnce(fn: Function, interval: number) {
   let runable = true
+  const FN = () => {
+    runable = true
+  }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   return function(this: any, ..._args: any[]) {
     if (runable) {
       runable = false
-      setTimeout(() => {
-        fn.apply(this, arguments)
-        runable = true
-      }, interval)
+      fn.apply(this, arguments)
+      setTimeout(FN, interval)
     }
   }
 }
-
-/** 防抖 (限制函数最小执行间隔 延迟执行)
+/** 防抖 (限制函数最小执行间隔 立即执行)
  * @test true
  *
  * @param {Function} fn 目标函数
  * @param {Number} interval 间隔(ms)
  *
  * @returns {Function} 目标函数包装
  */
-function debounceDelay(fn: Function, interval: number) {
+function debounceAtOnce(fn: Function, interval: number) {
   let timer: number
 
+  let runable = true
+  const FN = () => {
+    runable = true
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   return function(this: any, ..._args: any[]) {
-    clearTimeout(timer)
-    timer = setTimeout(() => {
+    if (runable) {
+      runable = false
       fn.apply(this, arguments)
-    }, interval)
+    }
+
+    clearTimeout(timer)
+    timer = setTimeout(FN, interval)
   }
 }
 
-export { throttle, debounce, throttleDelay, debounceDelay }
+export { throttle, debounce, throttleAtOnce, debounceAtOnce }

src/utils/skin.ts

@@ -1,17 +1,22 @@
-// 皮肤工具
+/** 皮肤工具(getter & setter 发布订阅/依赖注入就不用了)
+ */
 import Vue from 'vue'
 
-// css 对象集合(就不用Set了)
+// css 对象集合(就不用WeekMap/Set了)
 const OBJS: IObject<string>[] = []
 
 /** 获取当前皮肤
+ *
+ * @returns {String} 当前皮肤
  */
 function get(): string {
   return (window as any)[process.env.THEME_FIELD] || process.env.THEME
 }
 
 /** 设置当前皮肤
  * @param {String} skin 要设置的皮肤名
+ *
+ * @returns {String} 当前皮肤
  */
 function set(skin?: string) {
   if ((skin || (skin = process.env.THEME as string)) === get()) {
@@ -48,10 +53,22 @@ function getObj(dic: IObject<IObject<string>>) {
 
   /// 新增 ///
   obj = Vue.observable({ ...dic[get()] })
-  Object.defineProperty(obj, '$', { get: () => dic })
+  Object.defineProperty(obj, '$', { value: dic })
   OBJS.push(obj)
 
   return obj
 }
 
-export { getObj as default, get, set }
+/** 删除一个响应式CSS对象(的引用，释放内存)
+ * @param {IObject<string>} obj  响应式CSS对象
+ */
+function delObj(obj: IObject<string>) {
+  for (let i = 0, len = OBJS.length; i < len; i++) {
+    if (obj === OBJS[i]) {
+      OBJS.splice(i, 1)
+      return
+    }
+  }
+}
+
+export { getObj as default, delObj, get, set }