complete the tutorial

2025-12-27 05:00:30 +08:00 · 2024-09-09 11:42:18 +08:00 · 2024-09-09 11:42:18 +08:00 · 3f06b6ea89
commit 3f06b6ea89
parent 5e19ee301b
8 changed files with 162 additions and 20 deletions
--- a/src/renderer/src/App.tsx
+++ b/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',
-        align: 'start'
+        side: 'right',
+        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',
-        align: 'start'
+        side: 'left',
+        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)
+        }
+      }
    }
  ]
 })
--- a/src/renderer/src/components/base/base-setting-card.tsx
+++ b/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>
--- a/src/renderer/src/components/sider/dns-card.tsx
+++ b/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
--- a/src/renderer/src/components/sider/override-card.tsx
+++ b/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
--- a/src/renderer/src/components/sider/tun-switcher.tsx
+++ b/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
--- a/src/renderer/src/pages/profiles.tsx
+++ b/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"
-                  className="ml-2"
+                  title="Sub-Store"
+                  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>
--- a/src/renderer/src/pages/syspeoxy.tsx
+++ b/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"
--- a/src/renderer/src/pages/tun.tsx
+++ b/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