fix(site): return to the previous step and display the left active me…

…nu in the visual box
varletjs · Mar 31, 2021 · 5ed5313 · 5ed5313
1 parent 2605384
commit 5ed5313
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 23 deletions.
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -94,7 +94,7 @@ header {
 }
 
 .router-view__block {
-  padding: 50px 12px 0;
+  padding: 50px 12px 10px;
 }
 
 * {

diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -21,8 +21,11 @@ const router = createRouter({
   routes,
 })
 
-router.beforeEach((to, from) => {
+router.beforeEach((to) => {
   const isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
+  if (!isPhone && window.self === window.top) {
+    window.location.href = `/#/${to.query.language}/${to.query.path}`
+  }
 
   if (!isPhone) {
     const pcPath =
@@ -33,10 +36,6 @@ router.beforeEach((to, from) => {
     window.top['enableWatchURL'] = false
     window.top['router'].replace(pcPath)
   }
-
-  // if (!isPhone && window.self === window.top) {
-  //   window.location.href = `/#/${to.query.language}/${to.query.path}`
-  // }
 })
 
 const app = createApp(App as any)

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -106,7 +106,6 @@ export default defineComponent({
     const componentName: Ref<null | string> = ref(null)
     const title: Ref<string> = ref('')
     const currentMenuName: Ref<string> = ref('')
-    const versionList: Ref<string[]> = ref(['2.10.14', '1.x', '3.x'])
     const isHideVersion: Ref<boolean> = ref(true)
     let refs: HTMLElement = ref(null)
     const route = useRoute()
@@ -115,34 +114,38 @@ export default defineComponent({
     const languageList: Ref<Language> = ref({})
     const isOpenMenu: Ref<boolean> = ref(false)
     const path: Ref<string | null> = ref(null)
-
+    const isBack: Ref<boolean> = ref(false)
     const isPhone: Ref<boolean> = ref(false)
-    isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
 
+    isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
     languageList.value = config.pc.header.language
 
     const nav = (element: HTMLElement) => {
       refs = element
     }
 
-    const judgmentType = () => {
-      let componentValue = ''
-      let languageValue = ''
-      componentValue = window.location.hash.split('/')[2]
-      languageValue = window.location.hash.split('/')[1]
-      if (isPhone.value) {
-        window.location.href = `/mobile.html#/${componentValue}?language=${languageValue}&platform=pc&path=${componentValue}`
+    const judgmentType = (type) => {
+      let [, languageValue, componentValue] = window.location.hash.split('/')
+
+      if (type) {
+        path.value = componentValue
+
+        if (isPhone.value) {
+          window.location.href = `/mobile.html#/${componentValue}?language=${languageValue}&platform=pc&path=${componentValue}`
+        }
       }
+
       let childrenElement = refs.getElementsByClassName('var-cell')
       let index = menu.value.findIndex((item) => item.doc === componentValue)
-      path.value = componentValue
+
       if (index !== -1) {
         childrenElement[index].scrollIntoView({
           block: 'center',
           inline: 'start',
         })
       }
     }
+
     menu.value = configMenu
     header.value = configHeader
     title.value = configTitle
@@ -151,33 +154,36 @@ export default defineComponent({
       if (item.isTitle) {
         return false
       }
+      isBack.value = false
       componentName.value = item.nonComponent ? 'home' : item.doc
       path.value = item.nonComponent ? item.doc : null
     }
 
     const changeLanguage = (key) => {
       language.value = key
-      const pathArr = route.fullPath.split('/')
-      componentName.value = pathArr[pathArr.length - 1]
+      componentName.value = route.fullPath.split('/')[0]
       isOpenMenu.value = false
     }
 
     onMounted(() => {
-      judgmentType()
+      judgmentType('mounted')
     })
 
     watch(
       () => route.path,
       (to: string) => {
-        currentMenuName.value = to.slice(to.lastIndexOf('/') + 1)
-        language.value = to.slice(to.indexOf('#/') + 2, to.lastIndexOf('/'))
+        let [, languageValue = '', name = ''] = to.split('/')
+        currentMenuName.value = name
+
+        isBack.value ? judgmentType('') : (isBack.value = true)
 
         if (!window['enableWatchURL']) {
           window['enableWatchURL'] = true
           return
         }
 
         const currentNonComponent = menu.value.find((c) => c.doc === currentMenuName.value)?.nonComponent ?? false
+        language.value = languageValue
         componentName.value = currentNonComponent ? 'home' : currentMenuName.value
       },
       { immediate: true }
@@ -190,7 +196,6 @@ export default defineComponent({
       componentName,
       currentMenuName,
       title,
-      versionList,
       isHideVersion,
       languageList,
       isOpenMenu,

diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
@@ -19,6 +19,7 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
+
 window['enableWatchURL'] = true
 window.top['router'] = router
 

diff --git a/packages/varlet-ui/types/index.d.ts b/packages/varlet-ui/types/index.d.ts
@@ -13,6 +13,7 @@ import { Icon } from './Icon'
 import { Image } from './Image'
 import { IndexAnchor } from './IndexAnchor'
 import { IndexBar } from './IndexBar'
+import { Input } from './Input'
 import { Lazy } from './Lazy'
 import { Loading } from './Loading'
 import { Menu } from './Menu'
@@ -54,6 +55,7 @@ export {
   Image,
   IndexAnchor,
   IndexBar,
+  Input,
   Lazy,
   Loading,
   Menu,