feat(hooks): Add useIntro hook

feat: Add guide demo

src/components/ContentWrap/index.ts

@@ -0,0 +1,3 @@
+import ContentWrap from './src/ContentWrap.vue'
+
+export { ContentWrap }

src/components/ContentWrap/src/ContentWrap.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ElCard, ElTooltip } from 'element-plus'
+import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('content-wrap')
+
+defineProps({
+  title: propTypes.string.def(''),
+  message: propTypes.string.def('')
+})
+</script>
+
+<template>
+  <ElCard :class="prefixCls" shadow="never">
+    <template v-if="title" #header>
+      <div class="flex items-center">
+        {{ title }}
+        <ElTooltip v-if="message" effect="dark" placement="right">
+          <template #content>
+            <div class="max-w-200px">{{ message }}</div>
+          </template>
+          <Icon class="ml-5px" icon="bi:question-circle-fill" :size="14" />
+        </ElTooltip>
+      </div>
+    </template>
+    <div>
+      <slot></slot>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="less" scoped></style>

src/components/Menu/src/Menu.vue

@@ -70,6 +70,7 @@ export default defineComponent({
 
     return () => (
       <div
+        id={prefixCls}
         class={[
           `${prefixCls} ${prefixCls}__${unref(menuMode)}`,
           'h-[100%] overflow-hidden z-100 flex-col bg-[var(--left-menu-bg-color)]',

src/components/TabMenu/src/TabMenu.vue

@@ -12,7 +12,7 @@ import { cloneDeep } from 'lodash-es'
 import { filterMenusPath, initTabMap, tabPathMap } from './helper'
 import { useDesign } from '@/hooks/web/useDesign'
 
-const { getPrefixCls } = useDesign()
+const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('tab-menu')
 
@@ -106,6 +106,7 @@ export default defineComponent({
 
     return () => (
       <div
+        id={`${variables.namespace}-menu`}
         class={[
           prefixCls,
           'relative bg-[var(--left-menu-bg-color)] top-1px',

src/components/TagsView/src/TagsView.vue

@@ -148,7 +148,7 @@ watch(
 </script>
 
 <template>
-  <div :class="prefixCls" class="h-[var(--tags-view-height)] flex w-full relative">
+  <div :id="prefixCls" :class="prefixCls" class="h-[var(--tags-view-height)] flex w-full relative">
     <span
       :class="`${prefixCls}__tool`"
       class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer"