refactor(cli/site): refactor site

affects: varlet-cli-playground, @varlet/cli, @varlet/ui
varletjs · Jul 28, 2021 · fb51037 · fb51037
1 parent 5ff00d6
commit fb51037
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 69 deletions.
diff --git a/packages/varlet-cli-playground/varlet.config.js b/packages/varlet-cli-playground/varlet.config.js
@@ -8,7 +8,7 @@ module.exports = {
           'en-US': 'Basic Introduce',
         },
         doc: 'home',
-        nonComponent: true,
+        type: 3,
       },
     ],
   },

diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -40,8 +40,6 @@
 <script lang="ts">
 // @ts-ignore
 import config from '@config'
-import { defineComponent, ref, Ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
 import Icon from '@varlet/ui/es/icon'
 import AppBar from '@varlet/ui/es/app-bar'
 import Button from '@varlet/ui/es/button'
@@ -53,7 +51,9 @@ 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 { watchLang, getHashSearch } from '@varlet/ui/src/utils/components'
+import { defineComponent, ref, Ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { watchLang } from '@varlet/ui/src/utils/components'
 import { bigCamelize } from '../utils'
 import { get } from 'lodash'
 

diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -10,12 +10,10 @@ import { get } from 'lodash'
 import { isPhone } from '../utils'
 
 const redirect = get(config, 'mobile.redirect')
-const redirectComponent = routes.find((c: RouteRecordRaw) => c.path === redirect)?.component
-redirect && redirectComponent &&
+redirect &&
   routes.push({
     path: '/:pathMatch(.*)',
     redirect,
-    component: routes.find((c: RouteRecordRaw) => c.path === redirect).component,
   })
 
 const router = createRouter({
@@ -25,9 +23,10 @@ const router = createRouter({
 })
 
 router.beforeEach((to) => {
-  const { query: { language, path }, path: toPath } = to
+  const language = to.query.language ?? 'zh-CN'
+  const path = to.path
 
-  if (!language || !path) {
+  if (!language) {
     return false
   }
 
@@ -36,9 +35,9 @@ router.beforeEach((to) => {
   }
 
   if (!isPhone()) {
-    const pcPath = toPath === redirect && path
-        ? `/${language}/${path}`
-        : `/${language}${toPath}`
+    // const pcPath = toPath === redirect && path
+    //     ? `/${language}/${path}`
+    //     : `/${language}${toPath}`
 
     // @ts-ignore
     window.top['router'].replace(pcPath)

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="varlet-site">
-    <app-header
-      :language="language"
-      :component-name="componentName"
-    />
+    <app-header :language="language" />
 
     <div class="varlet-site-content">
       <app-sidebar
@@ -20,8 +17,7 @@
       <app-mobile
         :component-name="componentName"
         :language="language"
-        :path="path"
-        v-show="useMobile"
+        v-if="useMobile"
       />
     </div>
   </div>
@@ -40,15 +36,14 @@ import '@varlet/ui/es/loading/style'
 import { defineComponent, ref, Ref, watch, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 import { get } from 'lodash'
-import { getPCLocationInfo, isPhone } from '../utils'
+import { getPCLocationInfo, isPhone, MenuTypes } from '../utils'
 
 type Language = Record<string, string>
 
 export interface Menu {
-  isTitle: boolean
-  nonComponent: boolean
   doc: string
   text: Record<string, string>
+  type: MenuTypes
 }
 
 export default defineComponent({
@@ -60,23 +55,18 @@ export default defineComponent({
   },
   setup() {
     const menu: Ref<Menu[]> = ref(get(config, 'pc.menu', []))
-    const redirect = get(config, 'pc.redirect', '')
-    const mobileRedirect = get(config, 'mobile.redirect', '')
     const useMobile = ref(get(config, 'useMobile'))
     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 path: Ref<string | null> = ref(null)
-    const isBack: Ref<boolean> = ref(false)
 
-    const judgmentType = (type: string) => {
+    const init = () => {
       const { language, menuName } = getPCLocationInfo()
-      path.value = menuName || redirect.slice(1)
 
-      if (type && isPhone()) {
-        window.location.href = `./mobile.html#/${path.value}?language=${language || 'zh-CN'}&platform=mobile&path=${path.value}`
+      if (isPhone()) {
+        window.location.href = `./mobile.html#/${menuName}?language=${language || 'zh-CN'}&platform=mobile`
       }
 
       nextTick(() => {
@@ -96,27 +86,21 @@ export default defineComponent({
 
     const handleSidebarChange = ({ doc: menuName }) => {
       doc.value.scrollTop = 0
-      isBack.value = false
       componentName.value = menuName
-      path.value = menuName
     }
 
-    onMounted(() => {
-      judgmentType('mounted')
-    })
+    onMounted(() => init())
 
     watch(
       () => route.path,
-      (to: string) => {
-        if (to === '/') return
+      () => {
         const { language: lang, menuName: _menuName } = getPCLocationInfo()
-        menuName.value = _menuName
+        if (!lang || !_menuName) {
+          return
+        }
+        componentName.value = menuName.value = _menuName
         language.value = lang
         document.title = get(config, 'pc.title')[lang]
-        const isNonComponent = menu.value.find((c) => c.doc === menuName.value)?.nonComponent ?? false
-        componentName.value = isNonComponent ? mobileRedirect.slice(1) : menuName.value
-        console.log(componentName.value)
-        isBack.value ? judgmentType('') : (isBack.value = true)
       },
       { immediate: true }
     )
@@ -126,7 +110,6 @@ export default defineComponent({
       language,
       componentName,
       menuName,
-      path,
       doc,
       useMobile,
       handleSidebarChange,

diff --git a/packages/varlet-cli/site/pc/components/AppHeader.vue b/packages/varlet-cli/site/pc/components/AppHeader.vue
@@ -53,9 +53,6 @@ export default {
     [Cell.name]: Cell
   },
   props: {
-    componentName: {
-      type: String
-    },
     language: {
       type: String
     },

diff --git a/packages/varlet-cli/site/pc/components/AppMobile.vue b/packages/varlet-cli/site/pc/components/AppMobile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="varlet-site-mobile var-elevation--3">
     <div class="varlet-site-mobile-content">
-      <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
+      <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc`"></iframe>
     </div>
   </div>
 </template>
@@ -16,9 +16,6 @@ export default {
     language: {
       type: String
     },
-    path: {
-      type: String
-    }
   }
 }
 </script>

diff --git a/packages/varlet-cli/site/pc/components/AppSidebar.vue b/packages/varlet-cli/site/pc/components/AppSidebar.vue
@@ -4,14 +4,14 @@
       class="varlet-site-sidebar__item"
       :class="{
         'varlet-site-sidebar__item--active': item.doc === menuName,
-        'varlet-site-sidebar__link': !item.isTitle,
-        'varlet-site-sidebar__title': item.isTitle,
+        'varlet-site-sidebar__link': item.type !== menuTypes.TITLE,
+        'varlet-site-sidebar__title': item.type === menuTypes.TITLE,
       }"
       :key="index"
       v-for="(item, index) in menu"
       v-ripple="{
         touchmoveForbid: false,
-        disabled: !!item.isTitle,
+        disabled: item.type === menuTypes.TITLE,
         color: '#2979ff'
       }"
       @click="changeRoute(item)"
@@ -33,6 +33,8 @@ import '@varlet/ui/es/styles/elevation.less'
 import { getPCLocationInfo } from '../../utils'
 import type { PropType } from 'vue'
 import type { Menu } from '../App'
+import { MenuTypes } from '../../utils'
+import { reactive } from 'vue'
 
 export default {
   name: 'AppSidebar',
@@ -53,6 +55,8 @@ export default {
   },
   emits: ['change'],
   setup(props, { emit }) {
+    const menuTypes = reactive(MenuTypes)
+
     const changeRoute = (item) => {
       const { menuName } = getPCLocationInfo()
       if (item.isTitle || menuName === item.doc) {
@@ -63,6 +67,7 @@ export default {
     }
 
     return {
+      menuTypes,
       changeRoute
     }
   }

diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
@@ -24,7 +24,11 @@ const router = createRouter({
 let isEnd = true
 const { start, end } = useProgress()
 
-router.beforeEach(() => {
+router.beforeEach((to, from) => {
+  if (to.path === from.path) {
+    return false
+  }
+
   isEnd = false
   setTimeout(() => {
     if (!isEnd) start()

diff --git a/packages/varlet-cli/site/utils.ts b/packages/varlet-cli/site/utils.ts
@@ -11,7 +11,7 @@ export interface PCLocationInfo {
   menuName: string
 }
 
-export function getPCLocationInfo() {
+export function getPCLocationInfo(): PCLocationInfo {
   const [, language, menuName] = window.location.hash.split('/')
 
   return {
@@ -23,3 +23,9 @@ export function getPCLocationInfo() {
 export function isPhone() {
   return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
 }
+
+export enum MenuTypes {
+  TITLE = 1,
+  COMPONENT = 1 << 1,
+  DOCUMENTATION = 1 << 2.
+}
diff --git a/packages/varlet-ui/src/home/example/index.vue b/packages/varlet-ui/src/home/example/index.vue
@@ -37,7 +37,7 @@ export default {
     const logo = ref(config?.logo ?? '')
     const description = ref(config?.mobile?.title ?? {})
     const menu = ref(config?.pc?.menu ?? [])
-    const configComponents = menu.value.filter((item) => !item.isTitle && !item.nonComponent)
+    const configComponents = menu.value.filter((item) => item.type === 2)
     const components = reactive(configComponents)
     const lang = ref('zh-CN')
     const platform = ref('mobile')