refactor(cli/site): refactor relation of pc and mobile

affects: @varlet/cli, @varlet/ui
varletjs · Jul 28, 2021 · 96ef860 · 96ef860
1 parent fb51037
commit 96ef860
Show file tree

Hide file tree

Showing 18 changed files with 136 additions and 168 deletions.
diff --git a/packages/varlet-cli-playground/docs/home.en-US.md b/packages/varlet-cli-playground/docs/home.en-US.md
diff --git a/packages/varlet-cli-playground/docs/home.zh-CN.md b/packages/varlet-cli-playground/docs/home.zh-CN.md
diff --git a/packages/varlet-cli-playground/package.json b/packages/varlet-cli-playground/package.json
diff --git a/packages/varlet-cli-playground/varlet.config.js b/packages/varlet-cli-playground/varlet.config.js
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -1,14 +1,19 @@
 <template>
   <div style="position: relative">
     <header>
-      <var-app-bar :title="componentName" title-position="center">
-        <template #left v-if="isReturnIcon">
+      <var-app-bar :title="bigCamelizeComponentName" title-position="center">
+        <template #left v-if="showBackIcon">
           <var-button round @click="back" color="transparent" text-color="#fff" text>
             <var-icon name="chevron-left" :size="28" />
           </var-button>
         </template>
         <template #right>
-          <var-menu :offset-y="38" v-model:show="showMenu" style="background: transparent">
+          <var-menu
+            style="background: transparent"
+            :offset-y="38"
+            v-model:show="showMenu"
+            v-if="languages"
+          >
             <var-button text color="transparent" text-color="#fff" @click="showMenu = true">
               <var-icon name="translate" :size="24" />
               <var-icon name="chevron-down" :size="24" />
@@ -17,7 +22,7 @@
             <template #menu>
               <div style="background: #fff">
                 <var-cell
-                  v-for="(value, key) in languageList"
+                  v-for="(value, key) in nonEmptyLanguages"
                   :key="key"
                   v-ripple
                   :style="{ color: language === key ? '#2979ff' : '#666', cursor: 'pointer' }"
@@ -51,10 +56,10 @@ import '@varlet/ui/es/app-bar/style'
 import '@varlet/ui/es/button/style'
 import '@varlet/ui/es/menu/style'
 import '@varlet/ui/es/cell/style'
-import { defineComponent, ref, Ref, watch } from 'vue'
+import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { watchLang } from '@varlet/ui/src/utils/components'
-import { bigCamelize } from '../utils'
+import { bigCamelize, removeEmpty } from '../utils'
 import { get } from 'lodash'
 
 type Language = Record<string, string>
@@ -69,46 +74,45 @@ export default defineComponent({
     [Cell.name]: Cell,
   },
   setup() {
-    const componentName: Ref<string> = ref('')
+    const bigCamelizeComponentName: Ref<string> = ref('')
     const route = useRoute()
-    const isReturnIcon: Ref<boolean> = ref(false)
+    const showBackIcon: Ref<boolean> = ref(false)
     const showMenu: Ref<boolean> = ref(false)
     const language: Ref<string> = ref('')
-    const languageList: Ref<Language> = ref(config.pc.header.language)
+    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 changeLanguage = (key) => {
-      const path = route.path.slice(1)
-      language.value = key
+    const changeLanguage = (lang) => {
+      language.value = lang
       showMenu.value = false
+      window.location.href = `./mobile.html#${route.path}?language=${language.value}&replace=${route.query.replace}`
+    }
 
-      window.location.href = `./mobile.html#/${path}?language=${key}&platform=mobile&path=${path}`
+    const back = () => {
+      window.location.href = `./mobile.html#${redirect}?language=${language.value}&replace=${redirect.slice(1)}`
     }
 
     watchLang((newValue) => {
       language.value = newValue
     })
 
-    const back = () => {
-      window.location.href = `./mobile.html#${redirect}?language=${language.value}&platform=mobile&path=${redirect.slice(1)}`
-    }
-
     watch(
       () => route.path,
       (to: string) => {
-        const bigCamelizeComponentName = bigCamelize(to.slice(1))
-        componentName.value = bigCamelizeComponentName
-        isReturnIcon.value = bigCamelizeComponentName !== bigCamelize(redirect.slice(1))
+        bigCamelizeComponentName.value = bigCamelize(to.slice(1))
+        showBackIcon.value = bigCamelizeComponentName.value !== bigCamelize(redirect.slice(1))
       }
     )
 
     return {
-      componentName,
-      isReturnIcon,
-      back,
+      bigCamelizeComponentName,
+      showBackIcon,
       showMenu,
-      languageList,
+      languages,
       language,
+      nonEmptyLanguages,
+      back,
       changeLanguage,
     }
   },

diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -5,11 +5,13 @@ import config from '@config'
 import App from './App.vue'
 import '@varlet/touch-emulator'
 import { createApp } from 'vue'
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { get } from 'lodash'
-import { isPhone } from '../utils'
+import { inIframe, isPhone } from '../utils'
 
 const redirect = get(config, 'mobile.redirect')
+const defaultLanguage = get(config, 'defaultLanguage')
+
 redirect &&
   routes.push({
     path: '/:pathMatch(.*)',
@@ -23,24 +25,17 @@ const router = createRouter({
 })
 
 router.beforeEach((to) => {
-  const language = to.query.language ?? 'zh-CN'
+  const language = to.query.language ?? defaultLanguage
   const path = to.path
+  const replace = to.query.replace
 
-  if (!language) {
-    return false
-  }
-
-  if (!isPhone() && window.self === window.top) {
-    window.location.href = `./#/${language}/${path}`
+  if (!isPhone() && !inIframe()) {
+    window.location.href = `./#/${language}${path}`
   }
 
-  if (!isPhone()) {
-    // const pcPath = toPath === redirect && path
-    //     ? `/${language}/${path}`
-    //     : `/${language}${toPath}`
-
+  if (!isPhone() && inIframe()) {
     // @ts-ignore
-    window.top['router'].replace(pcPath)
+    window.top.onMobileRouteChange(path, language, replace)
   }
 })
 

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -17,7 +17,8 @@
       <app-mobile
         :component-name="componentName"
         :language="language"
-        v-if="useMobile"
+        :replace="menuName"
+        v-show="useMobile"
       />
     </div>
   </div>
@@ -33,7 +34,7 @@ import AppSidebar from './components/AppSidebar'
 import '@varlet/ui/es/cell/style'
 import '@varlet/ui/es/menu/style'
 import '@varlet/ui/es/loading/style'
-import { defineComponent, ref, Ref, watch, onMounted, nextTick } from 'vue'
+import { defineComponent, nextTick, onMounted, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash'
 import { getPCLocationInfo, isPhone, MenuTypes } from '../utils'
@@ -54,19 +55,29 @@ export default defineComponent({
     AppSidebar
   },
   setup() {
+    // config
+    const defaultLanguage = get(config, 'defaultLanguage')
     const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
     const useMobile = ref(get(config, 'useMobile'))
+    const mobileRedirect = get(config, 'mobile.redirect')
+
     const language: Ref<string> = ref('')
     const componentName: Ref<null | string> = ref(null)
     const menuName: Ref<string> = ref('')
     const doc: Ref<HTMLElement | null> = ref(null)
     const route = useRoute()
 
+    const getComponentNameByMenuName = (menuName: string) => {
+      const currentMenu = menu.value.find(menu => menu.doc === menuName)
+      return currentMenu?.type === MenuTypes.COMPONENT ? menuName : mobileRedirect.slice(1)
+    }
+
     const init = () => {
       const { language, menuName } = getPCLocationInfo()
 
       if (isPhone()) {
-        window.location.href = `./mobile.html#/${menuName}?language=${language || 'zh-CN'}&platform=mobile`
+        window.location.href = `./mobile.html#/${menuName}?language=${language || defaultLanguage}&platform=mobile`
+        return
       }
 
       nextTick(() => {
@@ -84,9 +95,10 @@ export default defineComponent({
       })
     }
 
-    const handleSidebarChange = ({ doc: menuName }) => {
+    const handleSidebarChange = (menu: Menu) => {
       doc.value.scrollTop = 0
-      componentName.value = menuName
+      componentName.value = getComponentNameByMenuName(menu.doc)
+      menuName.value = menu.doc
     }
 
     onMounted(() => init())
@@ -98,7 +110,9 @@ export default defineComponent({
         if (!lang || !_menuName) {
           return
         }
-        componentName.value = menuName.value = _menuName
+
+        componentName.value = getComponentNameByMenuName(_menuName)
+        menuName.value = _menuName
         language.value = lang
         document.title = get(config, 'pc.title')[lang]
       },