fix(cli): add site theme config property

affects: @varlet/cli
varletjs · Sep 9, 2021 · 9bf4945 · 9bf4945
1 parent 11b475c
commit 9bf4945
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -1,16 +1,10 @@
 <template>
-  <div
-    style="position: relative"
-    :style="{
-      '--site-color-mobile-cell-hover': themes['color-mobile-cell-hover'],
-      '--site-color-mobile-cell-hover-background': themes['color-mobile-cell-hover-background']
-    }"
-  >
+  <div style="position: relative">
     <header>
       <var-app-bar
+        class="app-bar"
         :title="bigCamelizeComponentName"
         title-position="center"
-        :color="themes['color-app-bar']"
       >
         <template #left v-if="showBackIcon">
           <var-button round @click="back" color="transparent" text-color="#fff" text>
@@ -34,8 +28,9 @@
                 <var-cell
                   v-for="(value, key) in nonEmptyLanguages"
                   :key="key"
+                  class="mobile-language-cell"
+                  :class="[language === key && 'mobile-language-cell--active']"
                   v-ripple
-                  :style="{ color: language === key ? '#2979ff' : '#666', cursor: 'pointer' }"
                   @click="changeLanguage(key)"
                 >
                   {{ value }}
@@ -57,7 +52,7 @@
 import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { bigCamelize, removeEmpty, watchLang } from '../utils'
+import { bigCamelize, removeEmpty, setThemes, watchLang } from '../utils'
 import { get } from 'lodash'
 
 type Language = Record<string, string>
@@ -72,7 +67,6 @@ export default defineComponent({
     const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
     const redirect = get(config, 'mobile.redirect', '')
-    const themes = ref(get(config, 'themes'))
 
     const changeLanguage = (lang) => {
       language.value = lang
@@ -96,8 +90,9 @@ export default defineComponent({
       }
     )
 
+    setThemes(config)
+
     return {
-      themes,
       bigCamelizeComponentName,
       showBackIcon,
       showMenu,
@@ -136,11 +131,25 @@ header {
   font-weight: bold;
 }
 
+.app-bar {
+  background: var(--site-color-app-bar);
+}
+
 .router-view__block {
   padding: 50px 12px 15px;
 }
 
 * {
   box-sizing: border-box;
 }
+
+.mobile-language-cell {
+  color: #666;
+  cursor: pointer;
+
+  &--active {
+    color: var(--site-color-mobile-language-active);
+    background: var(--site-color-mobile-language-active-background);
+  }
+}
 </style>
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -1,14 +1,5 @@
 <template>
-  <div
-    class="varlet-site"
-    :style="{
-      '--site-color-primary': themes['color-primary'],
-      '--site-color-link': themes['color-link'],
-      '--site-color-type': themes['color-type'],
-      '--site-color-side-bar': themes['color-side-bar'],
-      '--site-color-side-bar-active-background': themes['color-side-bar-active-background'],
-    }"
-  >
+  <div class="varlet-site">
     <app-header :language="language" />
 
     <div class="varlet-site-content">
@@ -42,7 +33,8 @@ import AppSidebar from './components/AppSidebar'
 import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash'
-import { getPCLocationInfo, isPhone, MenuTypes } from '../utils'
+import { getPCLocationInfo, isPhone, MenuTypes, setThemes } from '../utils'
+import { StyleProvider } from '@varlet/ui'
 
 type Language = Record<string, string>
 
@@ -64,7 +56,6 @@ export default defineComponent({
     const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
     const useMobile = ref(get(config, 'useMobile'))
     const mobileRedirect = get(config, 'mobile.redirect')
-    const themes = ref(get(config, 'themes'))
 
     const language: Ref<string> = ref('')
     const componentName: Ref<null | string> = ref(null)
@@ -124,12 +115,13 @@ export default defineComponent({
       { immediate: true }
     )
 
+    setThemes(config)
+
     return {
       menu,
       language,
       componentName,
       menuName,
-      themes,
       doc,
       useMobile,
       handleSidebarChange,

diff --git a/packages/varlet-cli/site/pc/components/AppHeader.vue b/packages/varlet-cli/site/pc/components/AppHeader.vue
@@ -22,6 +22,7 @@
           >
             <var-cell
               v-for="(value, key) in nonEmptyLanguages"
+              v-ripple
               :key="key"
               :class="{ 'varlet-site-header__language-list--active': language === key }"
               @click="handleLanguageChange(key)"
@@ -203,16 +204,11 @@ export default {
 
     .var-cell {
       width: 100px;
-
-      &:hover {
-        background: #edf5ff;
-        color: @color-primary;
-      }
     }
 
     &--active {
-      background: #edf5ff;
-      color: @color-primary;
+      background: var(--site-color-pc-language-active-background);
+      color: var(--site-color-pc-language-active);
     }
   }
 }

diff --git a/packages/varlet-cli/site/utils.ts b/packages/varlet-cli/site/utils.ts
@@ -1,4 +1,6 @@
 import { onMounted, onUnmounted } from 'vue'
+import { get } from 'lodash'
+import { StyleProvider } from '@varlet/ui'
 
 export function camelize(str: string): string {
   return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
@@ -23,7 +25,7 @@ export function getPCLocationInfo(): PCLocationInfo {
 }
 
 export function isPhone() {
-  return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
+  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
 }
 
 export enum MenuTypes {
@@ -83,3 +85,13 @@ export function addRouteListener(cb: () => void) {
     window.removeEventListener('popstate', cb)
   })
 }
+
+export function setThemes(config: Record<string, any>) {
+  const themes = get(config, 'themes', {})
+  Object.keys(themes).forEach((key) => {
+    const theme = themes[key]
+    StyleProvider({
+      [`--site-${key}`]: theme
+    })
+  })
+}
diff --git a/packages/varlet-cli/src/config/webpack.base.config.ts b/packages/varlet-cli/src/config/webpack.base.config.ts
@@ -57,6 +57,7 @@ const VUE_LOADER = {
 }
 
 export const BASE_CONFIG = {
+  target: 'web',
   entry: {
     pc: SITE_PC_MAIN,
     mobile: SITE_MOBILE_MAIN,

diff --git a/packages/varlet-cli/varlet.default.config.js b/packages/varlet-cli/varlet.default.config.js
@@ -38,10 +38,14 @@ module.exports = {
     'color-primary': '#1d92e9',
     'color-link': '#00c48f',
     'color-type': '#00c48f',
+    'color-pc-language-active': '#3a7afe',
+    'color-pc-language-active-background': '#edf5ff',
     'color-side-bar': '#3a7afe',
     'color-side-bar-active-background': '#3a7afe1a',
     'color-app-bar': '#3a7afe',
     'color-mobile-cell-hover': '#3a7afe',
     'color-mobile-cell-hover-background': '#3a7afe1a',
+    'color-mobile-language-active': '#3a7afe',
+    'color-mobile-language-active-background': '#edf5ff',
   },
 }