docs: fix demo anchor position not correct

examples/sites/demos/pc/webdoc/import-components-en.md

@@ -44,6 +44,13 @@ For more information about automatic on-demand imports, please refer to [unplugi
 
 ### Multi-component introduction
 
+<div class="tip custom-block">
+<br />
+Warm reminder: Exporting components with Tiny prefix is ​​supported since 3.17.0. If using previous versions, you need to use aliases.
+<br />
+<p>For example:<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+</div>
+
 Multi-component reference is from the dependency package.`@opentiny/vue`Multiple components are referenced in. The following is an example (in the following figure)`Button`and`Alert`Component as an example):
 
 ```html
@@ -55,12 +62,12 @@ Multi-component reference is from the dependency package.`@opentiny/vue`Multiple
 </template>
 
 <script>
-  import { Button, Alert } from '@opentiny/vue'
+  import { TinyButton, TinyAlert } from '@opentiny/vue'
 
   export default {
     components: {
-      TinyButton: Button,
-      TinyAlert: Alert
+      TinyButton,
+      TinyAlert
     }
   }
 </script>

examples/sites/demos/pc/webdoc/import-components.md

@@ -84,7 +84,14 @@ module.exports = defineConfig({
 
 ### 多组件引入
 
-多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `Button` 和 `Alert` 组件为例）：
+<div class="tip custom-block">
+<br />
+温馨提示：带有Tiny前缀的组件导出自3.17.0开始支持。若使用之前版本，需使用别名。
+<br />
+<p>例如：<code>import { Button as TinyButton } from '@opentiny/vue'</code></p>
+</div>
+
+多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `TinyButton` 和 `TinyAlert` 组件为例）：
 
 ```html
 <template>
@@ -95,12 +102,12 @@ module.exports = defineConfig({
 </template>
 
 <script>
-  import { Button, Alert } from '@opentiny/vue'
+  import { TinyButton, TinyAlert } from '@opentiny/vue'
 
   export default {
     components: {
-      TinyButton: Button,
-      TinyAlert: Alert
+      TinyButton,
+      TinyAlert
     }
   }
 </script>

examples/sites/src/menus.jsx

@@ -1,4 +1,4 @@
-import { cmpMenus } from '@menu/menus.js'
+import { docMenus, cmpMenus } from '@menu/menus.js'
 import { appData, $split } from './tools'
 
 /**
@@ -26,6 +26,16 @@ function genMenus() {
     }
   ]
 
+  const docOptions = docMenus.map((menu) => ({
+    ...menu,
+    label: `${appData.lang === 'zhCN' ? menu.label : menu.labelEn}${getChildrenStr(menu)}`,
+    children: menu.children.map((page) => ({
+      ...page,
+      id: page.key,
+      label: appData.lang === 'zhCN' ? page.title : page.titleEn,
+      type: 'docs'
+    }))
+  }))
   const cmpOptions = cmpMenus.map((menu) => ({
     ...menu,
     label: `${appData.lang === 'zhCN' ? menu.label : menu.labelEn}${getChildrenStr(menu)}`,
@@ -36,7 +46,7 @@ function genMenus() {
       type: 'components'
     }))
   }))
-  return [...standaloneOptions, ...cmpOptions]
+  return [...standaloneOptions, ...docOptions, ...cmpOptions]
 }
 
 // 获取菜单的类别图标

examples/sites/src/router.js

@@ -17,6 +17,13 @@ let routes = [
     name: 'overview',
     children: [{ name: 'Overview', path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }]
   },
+  // 文档
+  {
+    path: `${context}:all?/:lang/:theme/docs/:docId`,
+    component: Layout,
+    name: 'docs',
+    children: [{ name: 'Docs', path: '', component: Docs }]
+  },
   // 组件
   {
     path: `${context}:all?/zh-CN/:theme/components/:cmpId`,

examples/sites/src/views/components/components.vue

@@ -107,6 +107,7 @@
                       :demo="demo"
                       :curr-demo-id="currDemoId"
                       class="mb32"
+                      @mounted="demoMounted"
                     />
                   </div>
                   <div v-else>
@@ -224,6 +225,7 @@
         <div class="cmp-page-anchor catalog" v-if="currAnchorLinks.length">
           <tiny-anchor
             id="anchor"
+            :offset-top="156"
             :links="currAnchorLinks"
             :key="anchorRefreshKey"
             :is-affix="anchorAffix"
@@ -338,6 +340,26 @@ export default defineComponent({
     const { apiModeState } = useApiMode()
     const { templateModeState, staticPath, optionsList } = useTemplateMode()
 
+    let finishNum = 0
+    let isAllMounted = false
+    let demoMountedResolve
+    const demoMounted = () => {
+      finishNum++
+      if (finishNum === state.currJson.demos.length) {
+        isAllMounted = true
+        demoMountedResolve(true)
+      }
+    }
+
+    const allDemoMounted = async () => {
+      if (isAllMounted) {
+        return isAllMounted
+      }
+      return new Promise((resolve) => {
+        demoMountedResolve = resolve
+      })
+    }
+
     const getApiAnchorLinks = () => {
       if (!state.currJson.apis?.length) {
         return []
@@ -569,11 +591,9 @@ export default defineComponent({
 
           // F5刷新加载时，跳到当前示例
           // 应当在所有demo渲染完毕后在滚动，否则滚动完位置后，demo渲染会使滚动位置错位
-          setTimeout(() => {
-            nextTick(() => {
-              scrollByHash(hash)
-            })
-          }, 0)
+          return allDemoMounted().then(() => {
+            scrollByHash(hash)
+          })
         })
         .finally(() => {
           // 获取组件贡献者
@@ -616,6 +636,7 @@ export default defineComponent({
     }
 
     const fn = {
+      demoMounted,
       copyText: (text) => {
         navigator.clipboard.writeText(text)
       },

examples/sites/src/views/components/demo.vue

@@ -92,14 +92,15 @@ const { apiModeState, apiModeFn } = useApiMode()
 export default defineComponent({
   name: 'Demo',
   props: ['demo', 'currDemoId'],
+  emits: ['mounted'],
   components: {
     TinyTooltip,
     TinyTabs,
     TinyTabItem,
     TinyButton,
     AsyncHighlight
   },
-  setup(props) {
+  setup(props, { emit }) {
     const { templateModeState } = useTemplateMode()
     const { currentThemeKey } = useTheme()
     const isMobileFirst = computed(() => {
@@ -213,6 +214,9 @@ export default defineComponent({
         const log = `${demoName}示例资源不存在，请检查文件名是否正确？`
         cmp.value = <div>{log}</div>
       }
+      nextTick(() => {
+        emit('mounted')
+      })
     })
 
     const demos = ref(props.demo)