Fix: 主题首次切换不生效

Style: 调整主题文件结构
Maorey · Dec 15, 2019 · 54e19b6 · 54e19b6
1 parent 51fd0ef
commit 54e19b6
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-tpl",
   "author": "毛瑞 <[email protected]>",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "license": "MIT",
   "keywords": [

diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
@@ -98,6 +98,19 @@ export default class extends Vue {
 }
 </script>
 
+<style lang="scss">
+/// 全局样式 ///
+@import '~@/scss/reset';
+@import '~@/scss/icon';
+@import '~@/scss/transitions';
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+</style>
+
 <style lang="scss" module>
 .nav {
   position: absolute;
@@ -160,16 +173,3 @@ export default class extends Vue {
   right: 5px;
 }
 </style>
-
-<style lang="scss">
-/// 全局样式 ///
-@import '~@/scss/reset';
-@import '~@/scss/icon';
-@import '~@/scss/transitions';
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-}
-</style>
diff --git a/src/pages/other/App.vue b/src/pages/other/App.vue
@@ -5,6 +5,16 @@
  -->
 <template>
   <body :class="$style.wrapper">
+    <div :class="$style.skin">
+      <ElLink
+        v-for="item in SKIN"
+        :key="item.name"
+        :type="item.type"
+        :disabled="skin === item.name"
+        icon="el-icon-magic-stick"
+        @click="skin = item.name"
+      />
+    </div>
     <div :class="$style.nav">
       <RouterLink to="/home">
         Home
@@ -160,6 +170,30 @@
   </body>
 </template>
 
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+import statePrefer from '@other/store/modules/prefer'
+
+@Component
+export default class extends Vue {
+  get SKIN() {
+    return [
+      { name: 'light', type: 'danger' },
+      { name: 'dark', type: 'primary' },
+    ]
+  }
+
+  get skin() {
+    return statePrefer.skin
+  }
+
+  set skin(skin: string) {
+    statePrefer.setSkin(skin)
+  }
+}
+</script>
+
 <style lang="scss" module>
 .wrapper {
   color: $colorTextCommon;
@@ -178,4 +212,14 @@
     }
   }
 }
+
+.skin {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+
+  :global(.el-link) {
+    font-size: $large;
+  }
+}
 </style>
diff --git a/src/pages/other/theme/_colors.scss b/src/pages/other/theme/_colors.scss
diff --git a/src/pages/other/theme/index.scss b/src/pages/other/theme/index.scss
@@ -3,5 +3,4 @@
  * @Author: 毛瑞
  * @Date: 2019-07-23 20:46:21
  */
-@import './colors';
 @import './element';
diff --git a/src/theme/dark/index.scss b/src/theme/dark/index.scss
@@ -8,12 +8,12 @@
  */
 /// 变量 (私有变量 _+camelCase)///
 @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】
+@import '../parts/border'; // 边框 【(border|shadow)Case】: borderSolidWidth
+@import '../parts/fontSIzes'; // 字号 【cssCase】: xSmaller、xxxLarge
+@import '../parts/zIndexes'; // z-index层级划分 【zCase】: zMessage
+@import '../parts/layout'; // 固定布局尺寸 【(height|width)Case】: heightHeader、widthLfetColumn
+@import '../parts/scrollBar'; // 滚动条变量 【scrollBarCase】
+@import '../parts/icon'; // 字体图标变量 【iconCase】
 
 /* ---------------------- 我是一条分割线 (灬°ω°灬) ---------------------- */
 

diff --git a/src/theme/light/index.scss b/src/theme/light/index.scss
@@ -7,13 +7,13 @@
  * @Date: 2019-06-19 11:34:44
  */
 /// 变量 (私有变量 _+camelCase)///
-@import './colors'; // 颜色 【colorCase】: colorRed
-@import './border'; // 边框 【(border|shadow)Case】: borderSolidWidth
-@import './fontSIzes'; // 字号 【cssCase】: xSmaller、xxxLarge
-@import './zIndexes'; // z-index层级划分 【zCase】: zMessage
-@import './layout'; // 固定布局尺寸 【(height|width)Case】: heightHeader、widthLfetColumn
-@import './scrollBar'; // 滚动条变量 【scrollBarCase】
-@import './icon'; // 字体图标变量 【iconCase】
+@import '../parts/colors'; // 颜色 【colorCase】: colorRed
+@import '../parts/border'; // 边框 【(border|shadow)Case】: borderSolidWidth
+@import '../parts/fontSIzes'; // 字号 【cssCase】: xSmaller、xxxLarge
+@import '../parts/zIndexes'; // z-index层级划分 【zCase】: zMessage
+@import '../parts/layout'; // 固定布局尺寸 【(height|width)Case】: heightHeader、widthLfetColumn
+@import '../parts/scrollBar'; // 滚动条变量 【scrollBarCase】
+@import '../parts/icon'; // 字体图标变量 【iconCase】
 
 /* ---------------------- 我是一条分割线 (灬°ω°灬) ---------------------- */
 

diff --git a/src/theme/light/_border.scss → src/theme/parts/_border.scss b/src/theme/light/_border.scss → src/theme/parts/_border.scss
diff --git a/src/theme/light/_colors.scss → src/theme/parts/_colors.scss b/src/theme/light/_colors.scss → src/theme/parts/_colors.scss
diff --git a/src/theme/light/_fontSIzes.scss → src/theme/parts/_fontSIzes.scss b/src/theme/light/_fontSIzes.scss → src/theme/parts/_fontSIzes.scss
diff --git a/src/theme/light/_icon.scss → src/theme/parts/_icon.scss b/src/theme/light/_icon.scss → src/theme/parts/_icon.scss
diff --git a/src/theme/light/_layout.scss → src/theme/parts/_layout.scss b/src/theme/light/_layout.scss → src/theme/parts/_layout.scss
diff --git a/src/theme/light/_scrollBar.scss → src/theme/parts/_scrollBar.scss b/src/theme/light/_scrollBar.scss → src/theme/parts/_scrollBar.scss
diff --git a/src/theme/light/_zIndexes.scss → src/theme/parts/_zIndexes.scss b/src/theme/light/_zIndexes.scss → src/theme/parts/_zIndexes.scss
diff --git a/src/utils/skin.ts b/src/utils/skin.ts
@@ -26,6 +26,7 @@ function set(skin?: string) {
   /// 切换样式 ///
   let el
   for (el of document.querySelectorAll<HTMLLinkElement>('link[title]')) {
+    el.disabled = true // 必须先disabled下
     el.disabled = el.title !== skin
   }