@varlet/cli 2.10.0-alpha.1682067841655 → 2.10.0-alpha.1682270341744

package/lib/client/index.d.ts

@@ -2,6 +2,7 @@ import AppType from './appType';
 interface PCLocationInfo {
     language: string;
     menuName: string;
+    hash: string;
 }
 export declare type Theme = 'lightTheme' | 'darkTheme';
 export declare type StyleVars = Record<string, string>;

package/lib/client/index.js

@@ -21,10 +21,13 @@ export function StyleProvider(styleVars = {}) {
     });
 }
 export function getPCLocationInfo() {
-    const [, language, menuName] = window.location.hash.split('/');
+    var _a;
+    const [, language, path] = window.location.hash.split('/');
+    const [menuName, hash = ''] = (_a = path === null || path === void 0 ? void 0 : path.split('#')) !== null && _a !== void 0 ? _a : [];
     return {
         language,
         menuName,
+        hash,
     };
 }
 function getHashSearch() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "2.10.0-alpha.1682067841655",
+  "version": "2.10.0-alpha.1682270341744",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -70,8 +70,8 @@
     "vite": "4.0.4",
     "vue": "3.2.25",
     "webfont": "^9.0.0",
-    "@varlet/shared": "2.10.0-alpha.1682067841655",
-    "@varlet/vite-plugins": "2.10.0-alpha.1682067841655"
+    "@varlet/shared": "2.10.0-alpha.1682270341744",
+    "@varlet/vite-plugins": "2.10.0-alpha.1682270341744"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.12",
@@ -85,8 +85,8 @@
     "@types/node": "^18.7.20",
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
-    "@varlet/touch-emulator": "2.10.0-alpha.1682067841655",
-    "@varlet/icons": "2.10.0-alpha.1682067841655"
+    "@varlet/touch-emulator": "2.10.0-alpha.1682270341744",
+    "@varlet/icons": "2.10.0-alpha.1682270341744"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.2.47",
@@ -96,8 +96,8 @@
     "lodash-es": "^4.17.21",
     "vue": "3.2.47",
     "vue-router": "4.1.6",
-    "@varlet/icons": "2.10.0-alpha.1682067841655",
-    "@varlet/touch-emulator": "2.10.0-alpha.1682067841655"
+    "@varlet/touch-emulator": "2.10.0-alpha.1682270341744",
+    "@varlet/icons": "2.10.0-alpha.1682270341744"
   },
   "scripts": {
     "dev": "tsc --watch",

package/site/mobile/main.ts

@@ -37,9 +37,9 @@ const router = createRouter({
 })
 
 router.beforeEach((to: any) => {
-  const language = to.query.language ?? defaultLanguage
-  const path = to.path
-  const replace = to.query.replace
+  const { path, hash, query } = to
+  const language = query.language ?? defaultLanguage
+  const replace = query.replace
 
   if (!isPhone() && !inIframe()) {
     window.location.href = `./#/${language}${path}`
@@ -48,7 +48,7 @@ router.beforeEach((to: any) => {
   if (!isPhone() && inIframe()) {
     try {
       // @ts-ignore
-      window.parent.onMobileRouteChange(path, language, replace)
+      window.parent.onMobileRouteChange(path, language, replace, hash)
     } catch (e) {
       console.log(e)
     }

package/site/pc/Layout.vue

@@ -18,6 +18,7 @@ const mobileRedirect = get(config, 'mobile.redirect')
 const language: Ref<string> = ref('')
 const componentName: Ref<null | string> = ref(null)
 const menuName: Ref<string> = ref('')
+const hash: Ref<string> = ref('')
 const doc: Ref<HTMLElement | null> = ref(null)
 const route = useRoute()
 
@@ -48,6 +49,7 @@ const handleSidebarChange = (menu: Menu) => {
   doc.value!.scrollTop = 0
   componentName.value = getComponentNameByMenuName(menu.doc)
   menuName.value = menu.doc
+  hash.value = ''
 }
 
 const confirmClose = () => {
@@ -79,13 +81,14 @@ onMounted(() => {
 watch(
   () => route.path,
   () => {
-    const { language: lang, menuName: _menuName } = getPCLocationInfo()
+    const { language: lang, menuName: _menuName, hash: _hash } = getPCLocationInfo()
     if (!lang || !_menuName) {
       return
     }
 
     componentName.value = getComponentNameByMenuName(_menuName)
     menuName.value = _menuName
+    hash.value = _hash
     language.value = lang
     useMobile.value = menu.value.find(item => item.doc === _menuName)?.useMobile ?? get(config, 'useMobile')
     document.title = get(config, 'pc.title')[lang] as string
@@ -118,6 +121,7 @@ watch(
         :component-name="componentName"
         :language="language"
         :replace="menuName"
+        :hash="hash"
         v-show="useMobile"
       />
     </div>
@@ -282,6 +286,19 @@ iframe {
     }
 
     &-doc {
+      h3 {
+        display: flex;
+        align-items: center;
+
+        .router-link-active {
+          font-size: 20px;
+          margin-right: 8px;
+          user-select: none;
+          text-decoration: none;
+        }
+      }
+
+
       a {
         color: var(--site-config-color-link);
         -webkit-font-smoothing: antialiased;

package/site/pc/components/AppMobile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="varlet-site-mobile varlet-site-mobile--375">
     <div class="varlet-site-mobile-content">
-      <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}`"></iframe>
+      <iframe id="mobile" :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&replace=${replace}${hash ? `#${hash}` : ''}`"></iframe>
     </div>
   </div>
 </template>
@@ -18,6 +18,9 @@ export default {
     },
     replace: {
       type: String
+    },
+    hash: {
+      type: String
     }
   }
 }

package/site/pc/main.ts

@@ -36,14 +36,24 @@ redirect &&
 
 const router = createRouter({
   history: createWebHashHistory(),
-  scrollBehavior: () => ({ top: 0 }),
   routes,
+  scrollBehavior(to: any) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth',
+        top: 100
+      };
+    }
+
+    return { top: 0 };
+  },
 })
 
 let isEnd = true
 
 router.beforeEach((to: any, from: any) => {
-  if (to.path === from.path) {
+  if (to.fullPath === from.fullPath) {
     return false
   }
 
@@ -65,13 +75,13 @@ router.afterEach(() => {
 })
 
 Object.defineProperty(window, 'onMobileRouteChange', {
-  value: (path: string, language: string, replace: string) => {
+  value: (path: string, language: string, replace: string, hash: string) => {
     if (path === mobileRedirect) {
-      router.replace(`/${language}/${replace}`)
+      router.replace(`/${language}/${replace}${hash}`)
       return
     }
 
-    router.replace(`/${language}${path}`)
+    router.replace(`/${language}${path}${hash}`)
   }
 })