Style: skin => theme

Maorey · Dec 15, 2019 · c4478b7 · c4478b7
1 parent 54e19b6
commit c4478b7
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 40 deletions.
diff --git a/build/production.config.js b/build/production.config.js
@@ -107,7 +107,7 @@ module.exports = function(config, ENV, pages) {
     const name = 'theme-loader'
     /** 选项
      * {
-     *   localHandler: String 默认: 'src/utils/skin.ts'
+     *   localHandler: String 默认: 'src/utils/theme.ts'
      *    ({[theme]:Object}) => Object
      * }
      */

diff --git a/build/themeLoader.js b/build/themeLoader.js
@@ -9,7 +9,7 @@ const path = require('path')
 const loaderUtils = require('loader-utils')
 
 const PLUGIN_NAME = 'theme-loader'
-const DEFAULT_HANDLER = path.resolve('src/utils/skin')
+const DEFAULT_HANDLER = path.resolve('src/utils/theme')
 
 const EXTENSION = '.scss'
 const INDEX = '/index.scss'

diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
@@ -5,15 +5,15 @@
  -->
 <template>
   <body>
-    <form :class="$style.skin">
+    <form :class="$style.theme">
       <input
-        v-for="val in SKIN"
+        v-for="val in THEME"
         :key="val"
-        name="skin"
+        name="theme"
         type="radio"
         :value="val"
-        :checked="val === skin"
-        @click="skin = val"
+        :checked="val === theme"
+        @click="theme = val"
       >
     </form>
     <Transition
@@ -84,16 +84,16 @@ export default class extends Vue {
     return LINK
   }
 
-  get SKIN() {
+  get THEME() {
     return ['light', 'dark']
   }
 
-  get skin() {
-    return statePrefer.skin
+  get theme() {
+    return statePrefer.theme
   }
 
-  set skin(skin: string) {
-    statePrefer.setSkin(skin)
+  set theme(theme: string) {
+    statePrefer.setSkin(theme)
   }
 }
 </script>
@@ -167,9 +167,10 @@ body {
   }
 }
 
-.skin {
+.theme {
   position: absolute;
   top: 5px;
   right: 5px;
+  cursor: pointer;
 }
 </style>
diff --git a/src/pages/index/components/charts/echarts.ts b/src/pages/index/components/charts/echarts.ts
@@ -6,8 +6,6 @@
 // import { ECharts } from 'echarts' // 类型申明 ┐(：´ゞ｀)┌
 import echarts from 'echarts/lib/echarts'
 
-// import SKIN from '@/utils/skin' // 随皮肤改变...
-
 /// 注册主题 ///
 echarts.registerTheme('tpl', {
   // 自带主题 light 的颜色, 定制主题: https://echarts.baidu.com/theme-builder/

diff --git a/src/pages/other/App.vue b/src/pages/other/App.vue
@@ -5,14 +5,14 @@
  -->
 <template>
   <body :class="$style.wrapper">
-    <div :class="$style.skin">
+    <div :class="$style.theme">
       <ElLink
-        v-for="item in SKIN"
+        v-for="item in THEME"
         :key="item.name"
         :type="item.type"
-        :disabled="skin === item.name"
+        :disabled="theme === item.name"
         icon="el-icon-magic-stick"
-        @click="skin = item.name"
+        @click="theme = item.name"
       />
     </div>
     <div :class="$style.nav">
@@ -177,19 +177,19 @@ import statePrefer from '@other/store/modules/prefer'
 
 @Component
 export default class extends Vue {
-  get SKIN() {
+  get THEME() {
     return [
       { name: 'light', type: 'danger' },
       { name: 'dark', type: 'primary' },
     ]
   }
 
-  get skin() {
-    return statePrefer.skin
+  get theme() {
+    return statePrefer.theme
   }
 
-  set skin(skin: string) {
-    statePrefer.setSkin(skin)
+  set theme(theme: string) {
+    statePrefer.setSkin(theme)
   }
 }
 </script>
@@ -213,7 +213,7 @@ export default class extends Vue {
   }
 }
 
-.skin {
+.theme {
   position: absolute;
   top: 5px;
   right: 5px;

diff --git a/src/store/prefer.ts b/src/store/prefer.ts
@@ -2,7 +2,7 @@
  */
 import { VuexModule, Mutation, Action } from 'vuex-module-decorators'
 import { local } from '@/utils/storage'
-import { set } from '@/utils/skin'
+import { set } from '@/utils/theme'
 import CONFIG from '@/config'
 
 /** 本地存储的偏好信息
@@ -14,7 +14,7 @@ const PREFER = local.get(CONFIG.prefer) || {}
 interface IPrefer {
   /** 皮肤
    */
-  skin: string
+  theme: string
   /** 语言
    */
   lang: string
@@ -27,7 +27,7 @@ interface IPrefer {
 class Prefer extends VuexModule implements IPrefer {
   /// State & Getter(public) ///
   lang = (PREFER.lang || 'zh') as string
-  skin = (PREFER.skin = set(PREFER.skin))
+  theme = (PREFER.theme = set(PREFER.theme))
 
   /// Mutation 无法调用/commit 必须通过Action ///
   @Mutation
@@ -36,17 +36,17 @@ class Prefer extends VuexModule implements IPrefer {
   }
 
   @Mutation
-  protected SKIN(skin: string) {
-    this.skin = PREFER.skin = set(skin)
+  protected THEME(theme: string) {
+    this.theme = PREFER.theme = set(theme)
   }
 
   /// Action ///
   /** 设置皮肤
-   * @param {String} skin 皮肤名
+   * @param {String} theme 皮肤名
    */
   @Action
-  setSkin(skin: string) {
-    this.context.commit('SKIN', skin)
+  setSkin(theme: string) {
+    this.context.commit('THEME', theme)
   }
 
   /** 设置语言

diff --git a/src/utils/skin.ts → src/utils/theme.ts b/src/utils/skin.ts → src/utils/theme.ts
@@ -14,28 +14,28 @@ function get(): string {
 }
 
 /** 设置当前皮肤
- * @param {String} skin 要设置的皮肤名
+ * @param {String} theme 要设置的皮肤名
  *
  * @returns {String} 当前皮肤
  */
-function set(skin?: string) {
-  if ((skin || (skin = process.env.THEME as string)) === get()) {
-    return skin
+function set(theme?: string) {
+  if ((theme || (theme = process.env.THEME as string)) === get()) {
+    return theme
   }
 
   /// 切换样式 ///
   let el
   for (el of document.querySelectorAll<HTMLLinkElement>('link[title]')) {
     el.disabled = true // 必须先disabled下
-    el.disabled = el.title !== skin
+    el.disabled = el.title !== theme
   }
 
   /// 更新css对象 ///
   for (el of OBJS) {
-    Object.assign(el, (el.$ as any)[skin])
+    Object.assign(el, (el.$ as any)[theme])
   }
 
-  return ((window as any)[process.env.THEME_FIELD] = skin)
+  return ((window as any)[process.env.THEME_FIELD] = theme)
 }
 
 /** 获取响应式CSS对象(根据皮肤改变)