diff --git a/package.json b/package.json
index 2563a6c02..17e1538ed 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "echarts": "^5.2.2",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "1.3.0-beta.7",
+    "intro.js": "^4.3.0",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
@@ -50,6 +51,7 @@
     "@iconify/json": "^1.1.459",
     "@intlify/vite-plugin-vue-i18n": "^3.2.1",
     "@purge-icons/generated": "^0.7.0",
+    "@types/intro.js": "^3.0.2",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^17.0.10",
     "@types/nprogress": "^0.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e28025f91..6dd90b977 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@iconify/json': ^1.1.459
   '@intlify/vite-plugin-vue-i18n': ^3.2.1
   '@purge-icons/generated': ^0.7.0
+  '@types/intro.js': ^3.0.2
   '@types/lodash-es': ^4.17.5
   '@types/node': ^17.0.10
   '@types/nprogress': ^0.2.0
@@ -30,6 +31,7 @@ specifiers:
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.3.0
   husky: ^7.0.4
+  intro.js: ^4.3.0
   less: ^4.1.2
   lint-staged: ^12.2.2
   lodash-es: ^4.17.21
@@ -75,6 +77,7 @@ dependencies:
   echarts: registry.npmmirror.com/echarts/5.2.2
   echarts-wordcloud: registry.npmmirror.com/echarts-wordcloud/2.0.0_echarts@5.2.2
   element-plus: registry.npmmirror.com/element-plus/1.3.0-beta.7_vue@3.2.26
+  intro.js: registry.npmmirror.com/intro.js/4.3.0
   lodash-es: registry.nlark.com/lodash-es/4.17.21
   mockjs: registry.npmmirror.com/mockjs/1.1.0
   nprogress: registry.npmmirror.com/nprogress/0.2.0
@@ -92,6 +95,7 @@ devDependencies:
   '@iconify/json': registry.npmmirror.com/@iconify/json/1.1.459
   '@intlify/vite-plugin-vue-i18n': registry.npmmirror.com/@intlify/vite-plugin-vue-i18n/3.2.1_vite@2.7.13+vue-i18n@9.1.9
   '@purge-icons/generated': registry.nlark.com/@purge-icons/generated/0.7.0
+  '@types/intro.js': registry.npmmirror.com/@types/intro.js/3.0.2
   '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.5
   '@types/node': registry.npmmirror.com/@types/node/17.0.10
   '@types/nprogress': registry.npmmirror.com/@types/nprogress/0.2.0
@@ -3910,25 +3914,6 @@ packages:
     version: 1.4.0
     dev: true
 
-  registry.nlark.com/needle/2.9.1:
-    resolution:
-      {
-        integrity: sha1-ItHf++NJDCuD4wH3cJtnNs2PJoQ=,
-        registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.nlark.com/needle/download/needle-2.9.1.tgz
-      }
-    name: needle
-    version: 2.9.1
-    engines: { node: '>= 4.4.x' }
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      debug: registry.npmmirror.com/debug/3.2.7
-      iconv-lite: registry.nlark.com/iconv-lite/0.4.24
-      sax: registry.nlark.com/sax/1.2.4
-    dev: true
-    optional: true
-
   registry.nlark.com/no-case/3.0.4:
     resolution:
       {
@@ -7288,8 +7273,8 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.28
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.28
+      '@intlify/message-compiler': registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.29
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.29
       jsonc-eslint-parser: registry.npmmirror.com/jsonc-eslint-parser/1.4.1
       source-map: registry.nlark.com/source-map/0.6.1
       vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.26
@@ -7345,18 +7330,18 @@ packages:
       source-map: registry.nlark.com/source-map/0.6.1
     dev: false
 
-  registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.28:
+  registry.npmmirror.com/@intlify/message-compiler/9.2.0-beta.29:
     resolution:
       {
-        integrity: sha512-NBH9fZyitN2cijGt8bmU1W7ZPdhKbgW01L1RxJKFJW0cRaCmknJq63Aif1Q6xcxKt9ZhPbvIKHgPGzg1nWMfeA==,
+        integrity: sha512-FvMDwe57VvupujvNYUY90J8wv26wKu6j7I93dLwBOo/PTg7nQqFrmYQAF23UfDAdXO4FTdgHfFyb5ecYrN+n3g==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.28.tgz
+        tarball: https://registry.npmmirror.com/@intlify/message-compiler/download/@intlify/message-compiler-9.2.0-beta.29.tgz
       }
     name: '@intlify/message-compiler'
-    version: 9.2.0-beta.28
+    version: 9.2.0-beta.29
     engines: { node: '>= 12' }
     dependencies:
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.28
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.29
       source-map: registry.nlark.com/source-map/0.6.1
     dev: true
 
@@ -7400,15 +7385,15 @@ packages:
     engines: { node: '>= 10' }
     dev: false
 
-  registry.npmmirror.com/@intlify/shared/9.2.0-beta.28:
+  registry.npmmirror.com/@intlify/shared/9.2.0-beta.29:
     resolution:
       {
-        integrity: sha512-JBMcoj1D4kSAma7Vb0+d8z6lPLIn7hIdZJPxbU8bgeMMniwKLoIS/jGlEfrZihsB5+otckPeQp203z8skwVS0w==,
+        integrity: sha512-blMW14WBr3fiCEk/XO4IbSxM8WMAhQOzEgWzP1aqbkeXbIMiHeyFI0ZexwyTKsvDZz0wEWlhupQi+9udrJsozA==,
         registry: https://registry.npm.taobao.org/,
-        tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.28.tgz
+        tarball: https://registry.npmmirror.com/@intlify/shared/download/@intlify/shared-9.2.0-beta.29.tgz
       }
     name: '@intlify/shared'
-    version: 9.2.0-beta.28
+    version: 9.2.0-beta.29
     engines: { node: '>= 12' }
     dev: true
 
@@ -7434,7 +7419,7 @@ packages:
         optional: true
     dependencies:
       '@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9
-      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.28
+      '@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.29
       '@rollup/pluginutils': registry.npmmirror.com/@rollup/pluginutils/4.1.2
       debug: registry.npmmirror.com/debug/4.3.3
       fast-glob: registry.nlark.com/fast-glob/3.2.7
@@ -7572,6 +7557,17 @@ packages:
     version: 0.0.39
     dev: true
 
+  registry.npmmirror.com/@types/intro.js/3.0.2:
+    resolution:
+      {
+        integrity: sha1-y/m2nwVbd1gsws6+I26aQFsw770=,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/@types/intro.js/download/@types/intro.js-3.0.2.tgz
+      }
+    name: '@types/intro.js'
+    version: 3.0.2
+    dev: true
+
   registry.npmmirror.com/@types/json-schema/7.0.9:
     resolution:
       {
@@ -10629,6 +10625,17 @@ packages:
       through: registry.nlark.com/through/2.3.8
     dev: true
 
+  registry.npmmirror.com/intro.js/4.3.0:
+    resolution:
+      {
+        integrity: sha512-F4LXM42QIXcO3/2myGBBFdbbUVUK0lBhK7pAxPLd082u+3HfvigFR+Rptqy05q3OzjG/O0vMFDedrnHdSPi2rQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/intro.js/download/intro.js-4.3.0.tgz
+      }
+    name: intro.js
+    version: 4.3.0
+    dev: false
+
   registry.npmmirror.com/is-buffer/1.1.6:
     resolution:
       {
@@ -10840,7 +10847,7 @@ packages:
       image-size: registry.npmmirror.com/image-size/0.5.5
       make-dir: registry.nlark.com/make-dir/2.1.0
       mime: registry.npmmirror.com/mime/1.6.0
-      needle: registry.nlark.com/needle/2.9.1
+      needle: registry.npmmirror.com/needle/2.9.1
       source-map: registry.nlark.com/source-map/0.6.1
     dev: true
 
@@ -11191,6 +11198,25 @@ packages:
     engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
     hasBin: true
 
+  registry.npmmirror.com/needle/2.9.1:
+    resolution:
+      {
+        integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==,
+        registry: https://registry.npm.taobao.org/,
+        tarball: https://registry.npmmirror.com/needle/download/needle-2.9.1.tgz
+      }
+    name: needle
+    version: 2.9.1
+    engines: { node: '>= 4.4.x' }
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: registry.npmmirror.com/debug/3.2.7
+      iconv-lite: registry.nlark.com/iconv-lite/0.4.24
+      sax: registry.nlark.com/sax/1.2.4
+    dev: true
+    optional: true
+
   registry.npmmirror.com/node-fetch/2.6.1:
     resolution:
       {
diff --git a/src/components/ContentWrap/index.ts b/src/components/ContentWrap/index.ts
new file mode 100644
index 000000000..8c22cc833
--- /dev/null
+++ b/src/components/ContentWrap/index.ts
@@ -0,0 +1,3 @@
+import ContentWrap from './src/ContentWrap.vue'
+
+export { ContentWrap }
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
new file mode 100644
index 000000000..2c75f0d61
--- /dev/null
+++ b/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>
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
index 3eb60e541..d84df6fec 100644
--- a/src/components/Menu/src/Menu.vue
+++ b/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)]',
diff --git a/src/components/TabMenu/src/TabMenu.vue b/src/components/TabMenu/src/TabMenu.vue
index c0ca72117..2869845ea 100644
--- a/src/components/TabMenu/src/TabMenu.vue
+++ b/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',
diff --git a/src/components/TagsView/src/TagsView.vue b/src/components/TagsView/src/TagsView.vue
index d62ce5a1c..7d52ab441 100644
--- a/src/components/TagsView/src/TagsView.vue
+++ b/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"
diff --git a/src/hooks/web/useIntro.ts b/src/hooks/web/useIntro.ts
new file mode 100644
index 000000000..1c21d8bbd
--- /dev/null
+++ b/src/hooks/web/useIntro.ts
@@ -0,0 +1,41 @@
+import introJs from 'intro.js'
+import { IntroJs, Step, Options } from 'intro.js'
+import 'intro.js/introjs.css'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useDesign } from '@/hooks/web/useDesign'
+
+export const useIntro = (setps?: Step[], options?: Options) => {
+  const { t } = useI18n()
+
+  const { variables } = useDesign()
+
+  const defaultSetps: Step[] = setps || [
+    {
+      element: `#${variables.namespace}-menu`,
+      title: t('common.menu'),
+      intro: t('common.menuDes'),
+      position: 'right'
+    },
+    {
+      element: `#${variables.namespace}-tags-view`,
+      title: t('common.tagsView'),
+      intro: t('common.tagsViewDes'),
+      position: 'bottom'
+    }
+  ]
+
+  const defaultOptions: Options = options || {
+    prevLabel: t('common.prevLabel'),
+    nextLabel: t('common.nextLabel'),
+    skipLabel: t('common.skipLabel'),
+    doneLabel: t('common.doneLabel')
+  }
+
+  const introRef: IntroJs = introJs()
+
+  introRef.addSteps(defaultSetps).setOptions(defaultOptions)
+
+  return {
+    introRef
+  }
+}
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
index 57a0d778d..eee6a93b9 100644
--- a/src/layout/components/useRenderLayout.tsx
+++ b/src/layout/components/useRenderLayout.tsx
@@ -11,7 +11,7 @@ import { useDesign } from '@/hooks/web/useDesign'
 
 const { getPrefixCls } = useDesign()
 
-const prefixCls = getPrefixCls('layout-content')
+const prefixCls = getPrefixCls('layout')
 
 const appStore = useAppStore()
 
@@ -54,7 +54,7 @@ export const useRenderLayout = () => {
         </div>
         <div
           class={[
-            prefixCls,
+            `${prefixCls}-content`,
             'absolute top-0 h-[100%]',
             {
               'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@@ -69,7 +69,7 @@ export const useRenderLayout = () => {
           <ElScrollbar
             v-loading={pageLoading.value}
             class={[
-              `${prefixCls}-scrollbar`,
+              `${prefixCls}-content-scrollbar`,
               {
                 '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
                   fixedHeader.value
@@ -115,7 +115,7 @@ export const useRenderLayout = () => {
           <Menu class="!h-full"></Menu>
           <div
             class={[
-              prefixCls,
+              `${prefixCls}-content`,
               'h-[100%]',
               {
                 'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
@@ -129,7 +129,7 @@ export const useRenderLayout = () => {
             <ElScrollbar
               v-loading={pageLoading.value}
               class={[
-                `${prefixCls}-scrollbar`,
+                `${prefixCls}-content-scrollbar`,
                 {
                   '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
                     fixedHeader.value && tagsView.value
@@ -168,11 +168,11 @@ export const useRenderLayout = () => {
           <Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
           <ToolHeader></ToolHeader>
         </div>
-        <div class={[prefixCls, 'v-content h-full w-full']}>
+        <div class={[`${prefixCls}-content`, 'h-full w-full']}>
           <ElScrollbar
             v-loading={pageLoading.value}
             class={[
-              `${prefixCls}-scrollbar`,
+              `${prefixCls}-content-scrollbar`,
               {
                 'mt-[var(--tags-view-height)]': fixedHeader.value
               }
@@ -207,10 +207,9 @@ export const useRenderLayout = () => {
         </div>
         <div class="absolute top-[var(--logo-height)] left-0 w-full h-[calc(100%-var(--logo-height))] flex">
           <TabMenu></TabMenu>
-          {/* <Menu class="!h-full"></Menu> */}
           <div
             class={[
-              prefixCls,
+              `${prefixCls}-content`,
               'h-[100%]',
               {
                 'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
@@ -224,7 +223,7 @@ export const useRenderLayout = () => {
             <ElScrollbar
               v-loading={pageLoading.value}
               class={[
-                `${prefixCls}-scrollbar`,
+                `${prefixCls}-content-scrollbar`,
                 {
                   '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
                     fixedHeader.value && tagsView.value
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 89ecea445..0c9ae6fc8 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -17,7 +17,17 @@ export default {
     closeTheLeftTab: 'Close left',
     closeTheRightTab: 'Close right',
     closeOther: 'Close other',
-    closeAll: 'Close all'
+    closeAll: 'Close all',
+    prevLabel: 'Prev',
+    nextLabel: 'Next',
+    skipLabel: 'Jump',
+    doneLabel: 'End',
+    menu: 'Menu',
+    menuDes: 'Menu bar rendered in routed structure',
+    collapse: 'Collapse',
+    collapseDes: 'Expand and zoom the menu bar',
+    tagsView: 'Tags view',
+    tagsViewDes: 'Used to record routing history'
   },
   setting: {
     projectSetting: 'Project setting',
@@ -72,7 +82,8 @@ export default {
     menu2: 'Menu2',
     dashboard: 'Dashboard',
     analysis: 'Analysis',
-    workplace: 'Workplace'
+    workplace: 'Workplace',
+    guide: 'Guide'
   },
   analysis: {
     newUser: 'New user',
@@ -173,5 +184,11 @@ export default {
     timeSelect: 'Time Select',
     inputPassword: 'input Password',
     passwordStrength: 'Password Strength'
+  },
+  guideDemo: {
+    guide: 'Guide',
+    start: 'Start',
+    message:
+      'The guide page is very useful for some people who enter the project for the first time. You can briefly introduce the functions of the project. The boot page is based on intro js'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 713aa4beb..913fd46b6 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -17,7 +17,17 @@ export default {
     closeTheLeftTab: '关闭左侧标签页',
     closeTheRightTab: '关闭右侧标签页',
     closeOther: '关闭其他标签页',
-    closeAll: '关闭全部标签页'
+    closeAll: '关闭全部标签页',
+    prevLabel: '上一步',
+    nextLabel: '下一步',
+    skipLabel: '跳过',
+    doneLabel: '结束',
+    menu: '菜单',
+    menuDes: '以路由的结构渲染的菜单栏',
+    collapse: '展开缩收',
+    collapseDes: '展开和缩放菜单栏',
+    tagsView: '标签页',
+    tagsViewDes: '用于记录路由历史记录'
   },
   setting: {
     projectSetting: '项目配置',
@@ -72,7 +82,8 @@ export default {
     menu2: '菜单2',
     dashboard: '首页',
     analysis: '分析页',
-    workplace: '工作台'
+    workplace: '工作台',
+    guide: '引导'
   },
   analysis: {
     newUser: '新增用户',
@@ -173,5 +184,11 @@ export default {
     timeSelect: '时间选择',
     inputPassword: '密码输入框',
     passwordStrength: '密码强度'
+  },
+  guideDemo: {
+    guide: '引导页',
+    start: '开始',
+    message:
+      '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。引导页基于 intro.js'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f346bb37..7d8a0d342 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -68,6 +68,23 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/guide',
+    component: Layout,
+    name: 'Guide',
+    meta: {},
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/Guide/Guide.vue'),
+        name: 'GuideDemo',
+        meta: {
+          title: t('router.guide'),
+          icon: 'cib:telegram-plane'
+        }
+      }
+    ]
+  },
   {
     path: '/level',
     component: Layout,
diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue
new file mode 100644
index 000000000..38a710af5
--- /dev/null
+++ b/src/views/Guide/Guide.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useIntro } from '@/hooks/web/useIntro'
+import { ElButton } from 'element-plus'
+
+const { t } = useI18n()
+
+const { introRef } = useIntro()
+
+const guideStart = () => {
+  introRef.start()
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('guideDemo.guide')" :message="t('guideDemo.message')">
+    <ElButton type="primary" @click="guideStart">{{ t('guideDemo.start') }}</ElButton>
+  </ContentWrap>
+</template>
diff --git a/tsconfig.json b/tsconfig.json
index 46d8fddd0..6ad6c4d47 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,12 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["@intlify/vite-plugin-vue-i18n/client", "vite/client", "element-plus/global"],
+    "types": [
+      "@intlify/vite-plugin-vue-i18n/client",
+      "vite/client",
+      "element-plus/global",
+      "@types/intro.js"
+    ],
     "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": ["src/**/*", "types/**/*.d.ts", "mock/**/*.ts"],
diff --git a/vite.config.ts b/vite.config.ts
index 4aeb400b1..d33bb6732 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -132,7 +132,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         'axios',
         'qs',
         'echarts',
-        'echarts-wordcloud'
+        'echarts-wordcloud',
+        'intro.js'
       ]
     }
   }