feat: 引导页

src/layout/components/Header/components/header-left/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="header_crumb">
       <div class="menu_fold">
-        <a-button size="mini" type="text" class="menu_fold_icon" @click="onCollapsed">
+        <a-button size="mini" type="text" class="menu_fold_icon" id="system-collapsed" @click="onCollapsed">
           <template #icon>
             <icon-menu-fold :size="18" v-if="!collapsed" />
             <icon-menu-unfold :size="18" v-if="collapsed" />
@@ -10,7 +10,7 @@
         </a-button>
       </div>
       <div class="breadcrumb" v-if="isBreadcrumb">
-        <Breadcrumb />
+        <Breadcrumb id="system-breadcrumb" />
       </div>
     </div>
   </div>

src/layout/components/Header/components/header-right/index.vue

@@ -3,7 +3,7 @@
     <div class="header_setting">
       <!-- 国际化 -->
       <a-dropdown trigger="hover" @select="onLange">
-        <a-button size="mini" type="text" class="icon_btn">
+        <a-button size="mini" type="text" class="icon_btn" id="system-language">
           <template #icon>
             <icon-language :size="18" />
           </template>
@@ -15,7 +15,7 @@
       </a-dropdown>
       <!-- 切换黑夜模式 -->
       <a-tooltip :content="$t(`language.${!darkMode ? 'switch-to-night-mode' : 'switch-to-daytime-mode'}`)">
-        <a-button size="mini" type="text" class="icon_btn" @click="onNightMode">
+        <a-button size="mini" type="text" class="icon_btn" id="system-dark" @click="onNightMode">
           <template #icon>
             <icon-sun-fill :size="18" v-if="!darkMode" />
             <icon-moon-fill :size="18" v-else />
@@ -24,7 +24,7 @@
       </a-tooltip>
       <!-- 通知 -->
       <a-popover position="bottom" trigger="click">
-        <a-button size="mini" type="text" class="icon_btn notice">
+        <a-button size="mini" type="text" class="icon_btn notice" id="system-notice">
           <template #icon>
             <icon-notification :size="18" />
           </template>
@@ -33,7 +33,7 @@
       </a-popover>
       <!-- 全屏 -->
       <a-tooltip :content="$t(`language.${fullScreen ? 'full-screen' : 'exit-full-screen'}`)">
-        <a-button size="mini" type="text" class="icon_btn" @click="onFullScreen">
+        <a-button size="mini" type="text" class="icon_btn" id="system-fullscreen" @click="onFullScreen">
           <template #icon>
             <icon-fullscreen :size="18" v-if="fullScreen" />
             <icon-fullscreen-exit :size="18" v-else />
@@ -42,7 +42,7 @@
       </a-tooltip>
       <!-- 系统设置 -->
       <a-tooltip :content="$t(`language.system-settings`)">
-        <a-button size="mini" type="text" class="icon_btn" @click="onSystemSetting">
+        <a-button size="mini" type="text" class="icon_btn" id="system-settings" @click="onSystemSetting">
           <template #icon>
             <icon-settings :size="18" />
           </template>
@@ -50,7 +50,7 @@
       </a-tooltip>
       <!-- 主题设置 -->
       <a-tooltip :content="$t(`language.theme-settings`)">
-        <a-button size="mini" type="text" class="icon_btn" @click="onThemeSetting">
+        <a-button size="mini" type="text" class="icon_btn" id="system-theme" @click="onThemeSetting">
           <template #icon>
             <icon-skin :size="18" />
           </template>
@@ -58,7 +58,7 @@
       </a-tooltip>
       <!-- 我的 -->
       <a-dropdown trigger="hover">
-        <div class="my_setting">
+        <div class="my_setting" id="system-my-setting">
           <a-image width="32" height="32" fit="cover" :src="myImage" class="my_image" />
           <span>admin</span>
           <div class="icon_down">

src/layout/components/Tabs/index.vue

@@ -19,10 +19,12 @@
     <div class="tabs_setting">
       <a-space>
         <a-tooltip :content="$t(`language.refresh`)" position="bottom" mini>
-          <span ref="refreshRef" :class="rotateOpen && 'refresh'"><icon-refresh :size="18" @click="refresh" /></span>
+          <span ref="refreshRef" id="system-tabs-refresh" :class="rotateOpen && 'refresh'">
+            <icon-refresh :size="18" @click="refresh" />
+          </span>
         </a-tooltip>
         <a-dropdown trigger="hover" :popup-max-height="false">
-          <div class="setting"><icon-apps :size="18" /></div>
+          <div class="setting" id="system-tabs-setting"><icon-apps :size="18" /></div>
           <template #content>
             <a-doption @click="closeCurrent">
               <template #icon><icon-close /></template>

src/views/common-component/newbie/newbie.vue

@@ -8,7 +8,10 @@
       <a-typography-text id="newbie-title-5"> 清新丰富的主题配置：内置多样的主题配置。</a-typography-text>
     </a-space>
     <div class="margin-top">
-      <a-button type="primary" @click="openNewbie">打开指引</a-button>
+        <a-space >      
+            <a-button type="primary" @click="openNewbie">打开指引</a-button>
+            <a-button type="primary" @click="openSystemNewbie">系统指引</a-button>
+        </a-space> 
     </div>
     <div class="margin-top">新手指引，基于<a-link href="https://driver.employleague.cn/" target="_blank">driver.js</a-link></div>
   </div>
@@ -46,7 +49,7 @@ const openNewbie = () => {
         popover: {
           title: "严格的代码规范",
           description: "严格遵循开发设计规范，保证代码的规范性",
-          side: "left"
+          side: "right"
         }
       },
       {
@@ -54,7 +57,7 @@ const openNewbie = () => {
         popover: {
           title: "内置国际化方案",
           description: "轻松实现多语言支持",
-          side: "left"
+          side: "right"
         }
       },
       {
@@ -62,13 +65,113 @@ const openNewbie = () => {
         popover: {
           title: "清新丰富的主题配置",
           description: "内置多样的主题配置",
-          side: "left"
+          side: "right"
         }
       }
     ]
   });
   driverObj.drive();
 };
+
+let systemList = ref<any>([{
+        element: "#system-collapsed",
+        popover: {
+          title: "折叠菜单",
+          description: "菜单的展开收起",
+          side: "right"
+        }
+      },
+      {
+        element: "#system-breadcrumb",
+        popover: {
+          title: "面包屑",
+          description: "页面路径",
+          side: "right"
+        }
+      },
+      {
+        element: "#system-language",
+        popover: {
+          title: "国际化",
+          description: "切换系统语言",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-dark",
+        popover: {
+          title: "黑暗模式",
+          description: "切换黑暗和白天模式",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-notice",
+        popover: {
+          title: "通知",
+          description: "系统通知信息",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-fullscreen",
+        popover: {
+          title: "全屏",
+          description: "系统全屏显示",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-settings",
+        popover: {
+          title: "系统设置",
+          description: "修改系统的渲染配置",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-theme",
+        popover: {
+          title: "主题设置",
+          description: "修改系统的主题配置",
+          side: "left"
+        }
+      },
+      {
+        element: "#system-my-setting",
+        popover: {
+          title: "我的",
+          description: "个人中心设置",
+          side: "left"
+        },
+        
+      }, {
+        element: "#system-tabs-setting",
+        popover: {
+          title: "Tabs栏功能",
+          description: "Tabs栏的关闭、刷新等功能",
+          side: "left"
+        },
+        
+      }, {
+        element: "#system-tabs-refresh",
+        popover: {
+          title: "页面刷新",
+          description: "刷新当前窗口页面",
+          side: "left"
+        },
+        
+      }])
+const openSystemNewbie = () => {
+    const driverObj = driver({
+    allowClose: true,
+    doneBtnText: "结束",
+    nextBtnText: "下一步",
+    prevBtnText: "上一步",
+    steps: systemList.value
+  });
+  driverObj.drive();
+}
 </script>
 
 <style lang="scss" scoped>