feat(docs): the official website adds API anchor function

Author: zzcr

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

@@ -248,6 +248,7 @@
 
 <script lang="jsx">
 import { defineComponent, reactive, computed, toRefs, watch, onMounted, ref, onUnmounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
 import { Anchor, ButtonGroup, Grid, GridColumn, Tabs, TabItem, Tooltip } from '@opentiny/vue'
@@ -279,6 +280,8 @@ export default defineComponent({
     const isRunningTest = localStorage.getItem('tiny-e2e-test') === 'true'
     const anchorRefreshKey = ref(0)
     const apiTableRef = ref()
+    const route = useRoute()
+
     const state = reactive({
       webDocPath: computed(() => ''),
       langKey: getWord('zh-CN', 'en-US'),
@@ -310,7 +313,7 @@ export default defineComponent({
       currAnchorLinks: computed(() => (state.activeTab === 'demos' ? state.demoAnchorLinks : state.apiAnchorLinks)),
       // 单demo显示时
       singleDemo: null,
-      activeTab: 'demos',
+      activeTab: route.hash === '#api' ? 'api' : 'demos',
       tableData: {},
       currApiTypes: [],
       showApiTab: computed(() => state.currApiTypes.length),
@@ -616,7 +619,8 @@ export default defineComponent({
       copyText: (text) => {
         navigator.clipboard.writeText(text)
       },
-      onTabsClick: () => {
+      onTabsClick: (data) => {
+        router.push(`#${data.name}`)
         scrollToLayoutTop()
       },
       // 点击 api区域的 name列时