complete the tutorial

src/renderer/src/App.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
-import { useLocation, useNavigate, useRoutes } from 'react-router-dom'
+import { NavigateFunction, useLocation, useNavigate, useRoutes } from 'react-router-dom'
 import OutboundModeSwitcher from '@renderer/components/sider/outbound-mode-switcher'
 import SysproxySwitcher from '@renderer/components/sider/sysproxy-switcher'
 import TunSwitcher from '@renderer/components/sider/tun-switcher'
@@ -36,6 +36,8 @@ import MihomoIcon from './components/base/mihomo-icon'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
 
+let navigate: NavigateFunction
+
 const App: React.FC = () => {
   const { appConfig, patchAppConfig } = useAppConfig()
   const {
@@ -60,7 +62,7 @@ const App: React.FC = () => {
   const [order, setOrder] = useState(siderOrder)
   const sensors = useSensors(useSensor(PointerSensor))
   const { setTheme, systemTheme } = useTheme()
-  const navigate = useNavigate()
+  navigate = useNavigate()
   const location = useLocation()
   const page = useRoutes(routes)
 
@@ -214,14 +216,24 @@ export const firstDriver = driver({
   progressText: '{{current}} / {{total}}',
   overlayOpacity: 0.9,
   steps: [
+    {
+      element: 'none',
+      popover: {
+        title: '欢迎使用Mihomo Party',
+        description:
+          '这是一份交互式使用教程，如果您已经完全熟悉本软件的操作，可以直接点击右上角关闭按钮，后续您可以随时从设置中打开本教程',
+        side: 'over',
+        align: 'center'
+      }
+    },
     {
       element: '.side',
       popover: {
         title: '导航栏',
         description:
           '左侧是应用的导航栏，兼顾仪表盘功能，在这里可以切换不同页面，也可以概览常用的状态信息',
-        side: 'left',
+        side: 'right',
-        align: 'start'
+        align: 'center'
       }
     },
     {
@@ -229,7 +241,7 @@ export const firstDriver = driver({
       popover: {
         title: '卡片',
         description: '点击导航栏卡片可以跳转到对应页面，拖动导航栏卡片可以自由排列卡片顺序',
-        side: 'bottom',
+        side: 'right',
         align: 'start'
       }
     },
@@ -238,8 +250,8 @@ export const firstDriver = driver({
       popover: {
         title: '主要区域',
         description: '右侧是应用的主要区域，展示了导航栏所选页面的内容',
-        side: 'right',
+        side: 'left',
-        align: 'start'
+        align: 'center'
       }
     },
     {
@@ -247,10 +259,139 @@ export const firstDriver = driver({
       popover: {
         title: '订阅管理',
         description:
-          '订阅管理卡片展示当前运行的订阅配置信息，点击进入订阅管理页面可以在这里管理订阅配置\n更多功能请查阅 <a href="https://mihomo.party" target="_blank">官方文档</a>',
+          '订阅管理卡片展示当前运行的订阅配置信息，点击进入订阅管理页面可以在这里管理订阅配置',
+        side: 'right',
+        align: 'start',
+        onNextClick: async (): Promise<void> => {
+          navigate('/profiles')
+          setTimeout(() => {
+            firstDriver.moveNext()
+          }, 0)
+        }
+      }
+    },
+    {
+      element: '.profiles-sticky',
+      popover: {
+        title: '订阅导入',
+        description:
+          'Mihomo Party支持多种订阅导入方式，在此输入订阅链接，点击导入即可导入您的订阅配置，如果您的订阅需要代理才能更新，请勾选“代理”再点击导入，当然这需要已经有一个可以正常使用的订阅才可以',
         side: 'bottom',
         align: 'start'
       }
+    },
+    {
+      element: '.substore-import',
+      popover: {
+        title: 'Sub-Store',
+        description:
+          'Mihomo Party深度集成了Sub-Store，您可以点击该按钮进入Sub-Store或直接导入您通过Sub-Store管理的订阅，Mihomo Party默认使用内置的Sub-Store后端，如果您有自建的Sub-Store后端，可以在设置页面中配置，如果您不使用Sub-Store，也可以在设置页面中关闭',
+        side: 'bottom',
+        align: 'start'
+      }
+    },
+    {
+      element: '.new-profile',
+      popover: {
+        title: '本地订阅',
+        description: '点击“+”可以选择本地文件进行导入或者直接新建空白配置进行编辑',
+        side: 'bottom',
+        align: 'start'
+      }
+    },
+    {
+      element: '.sysproxy-card',
+      popover: {
+        title: '系统代理',
+        description:
+          '导入订阅之后，内核已经开始运行并监听指定端口，此时您已经可以通过指定代理端口来使用代理了，如果您要使大部分应用自动使用该端口的代理，您还需要打开系统代理开关',
+        side: 'right',
+        align: 'start',
+        onNextClick: async (): Promise<void> => {
+          navigate('/sysproxy')
+          setTimeout(() => {
+            firstDriver.moveNext()
+          }, 0)
+        }
+      }
+    },
+    {
+      element: '.sysproxy-settings',
+      popover: {
+        title: '系统代理设置',
+        description:
+          '再次您可以进行系统代理相关设置，选择代理模式，如果某些Windows应用不遵循系统代理，还可以使用UWP工具解除本地回环限制，对于手动代理模式和PAC代理模式的区别，请自行百度',
+        side: 'top',
+        align: 'start'
+      }
+    },
+    {
+      element: '.tun-card',
+      popover: {
+        title: '虚拟网卡',
+        description:
+          '虚拟网卡，即同类软件中常见的“Tun模式”，对于某些不遵循系统代理的应用，您可以打开虚拟网卡以让内核接管所有流量',
+        side: 'right',
+        align: 'start',
+        onNextClick: async (): Promise<void> => {
+          navigate('/tun')
+          setTimeout(() => {
+            firstDriver.moveNext()
+          }, 0)
+        }
+      }
+    },
+    {
+      element: '.tun-settings',
+      popover: {
+        title: '虚拟网卡设置',
+        description:
+          '这里可以更改虚拟网卡相关设置，Mihomo Party理论上已经完全解决权限问题，如果您的虚拟网卡仍然不可用，可以尝试重设防火墙（Windows）或手动授权内核（MacOS/Linux）后重启内核',
+        side: 'bottom',
+        align: 'start'
+      }
+    },
+    {
+      element: '.override-card',
+      popover: {
+        title: '覆写',
+        description:
+          'Mihomo Party提供强大的覆写功能，可以对您导入的订阅配置进行个性化修改，如添加规则、自定义代理组等，您可以直接导入别人写好的覆写文件，也可以自己动手编写，<b>编辑好覆写文件一定要记得在需要覆写的订阅上启用</b>，覆写文件的语法请参考 <a href="https://mihomo.party/guides/function/override/overview" target="_blank">官方文档</a>',
+        side: 'right',
+        align: 'center'
+      }
+    },
+    {
+      element: '.dns-card',
+      popover: {
+        title: 'DNS',
+        description:
+          '软件默认接管了内核的 DNS 设置，如果您需要使用订阅配置中的 DNS 设置，可以到应用设置中关闭“接管 DNS 设置”，域名嗅探同理',
+        side: 'right',
+        align: 'center',
+        onNextClick: async (): Promise<void> => {
+          navigate('/profiles')
+          setTimeout(() => {
+            firstDriver.moveNext()
+          }, 0)
+        }
+      }
+    },
+    {
+      element: 'none',
+      popover: {
+        title: '教程结束',
+        description:
+          '现在您已经了解了软件的基本用法，导入您的订阅开始使用吧，祝您使用愉快！\n您还可以加入我们的官方 <a href="https://t.me/mihomo_party_channel" target="_blank">Telegram 频道</a> 获取最新资讯',
+        side: 'top',
+        align: 'center',
+        onNextClick: async (): Promise<void> => {
+          navigate('/profiles')
+          setTimeout(() => {
+            firstDriver.destroy()
+          }, 0)
+        }
+      }
     }
   ]
 })

src/renderer/src/components/base/base-setting-card.tsx

@@ -4,15 +4,16 @@ import { Accordion, AccordionItem, Card, CardBody } from '@nextui-org/react'
 interface Props {
   title?: string
   children?: React.ReactNode
+  className?: string
 }
 
 const SettingCard: React.FC<Props> = (props) => {
   return !props.title ? (
-    <Card className="m-2">
+    <Card className={`${props.className} m-2`}>
       <CardBody>{props.children}</CardBody>
     </Card>
   ) : (
-    <Accordion isCompact className="my-2" variant="splitted">
+    <Accordion isCompact className={`${props.className} my-2`} variant="splitted" {...props}>
       <AccordionItem hideIndicator keepContentMounted title={props.title}>
         {props.children}
       </AccordionItem>

src/renderer/src/components/sider/dns-card.tsx

@@ -39,7 +39,7 @@ const DNSCard: React.FC = () => {
         transition,
         zIndex: isDragging ? 'calc(infinity)' : undefined
       }}
-      className={`${dnsCardStatus} ${!controlDns ? 'hidden' : ''}`}
+      className={`${dnsCardStatus} ${!controlDns ? 'hidden' : ''} dns-card`}
     >
       <Card
         fullWidth

src/renderer/src/components/sider/override-card.tsx

@@ -30,7 +30,7 @@ const OverrideCard: React.FC = () => {
         transition,
         zIndex: isDragging ? 'calc(infinity)' : undefined
       }}
-      className={overrideCardStatus}
+      className={`${overrideCardStatus} override-card`}
     >
       <Card
         fullWidth

src/renderer/src/components/sider/tun-switcher.tsx

@@ -62,7 +62,7 @@ const TunSwitcher: React.FC = () => {
         transition,
         zIndex: isDragging ? 'calc(infinity)' : undefined
       }}
-      className={tunCardStatus}
+      className={`${tunCardStatus} tun-card`}
     >
       {openPasswordModal && (
         <BasePasswordModal

src/renderer/src/pages/profiles.tsx

@@ -218,7 +218,7 @@ const Profiles: React.FC = () => {
         </Button>
       }
     >
-      <div className="sticky top-0 z-40 bg-background">
+      <div className="sticky profiles-sticky top-0 z-40 bg-background">
         <div className="flex p-2">
           <Input
             size="sm"
@@ -269,8 +269,8 @@ const Profiles: React.FC = () => {
               <DropdownTrigger>
                 <Button
                   isLoading={subStoreImporting}
-                  title="SubStore"
+                  title="Sub-Store"
-                  className="ml-2"
+                  className="ml-2 substore-import"
                   size="sm"
                   isIconOnly
                   color="primary"
@@ -337,7 +337,7 @@ const Profiles: React.FC = () => {
           )}
           <Dropdown>
             <DropdownTrigger>
-              <Button className="ml-2" size="sm" isIconOnly color="primary">
+              <Button className="ml-2 new-profile" size="sm" isIconOnly color="primary">
                 <FaPlus />
               </Button>
             </DropdownTrigger>

src/renderer/src/pages/syspeoxy.tsx

@@ -123,7 +123,7 @@ const Sysproxy: React.FC = () => {
           }}
         />
       )}
-      <SettingCard>
+      <SettingCard className="sysproxy-settings">
         <SettingItem title="代理主机" divider>
           <Input
             size="sm"

src/renderer/src/pages/tun.tsx

@@ -66,7 +66,7 @@ const Tun: React.FC = () => {
         />
       )}
       <BasePage
-        title="Tun 设置"
+        title="虚拟网卡设置"
         header={
           changed && (
             <Button
@@ -93,7 +93,7 @@ const Tun: React.FC = () => {
           )
         }
       >
-        <SettingCard>
+        <SettingCard className="tun-settings">
           {platform === 'win32' && (
             <SettingItem title="重设防火墙" divider>
               <Button